开发上传图片的记录

src/views/analysis/index.vue

@@ -35,14 +35,18 @@
                     : ''
                 "
               >
-                <el-popover placement="right" trigger="click">
-                  <div class="table_box">
-                    <el-row  style="padding-bottom:20px">
-                      <el-col :span="24"><el-input v-model="detailed_information.note[e.id]" placeholder="请填写要记录的内容" @blur="saveNote(e.id)"></el-input></el-col>
-                      <!-- <el-col :span="6"><el-button @click="saveNote(e.id)" size="mini"  class="note_mobile_box"  type="primary" >保存</el-button></el-col> -->
-                    </el-row>
+                <el-popover placement="right" trigger="click" @click="note_id=e.id">
+                  <div class="table_box" @click="note_id=e.id">
                     <!-- <div><h3>错误点分析</h3></div> -->
                     <table border="1" cellspacing="0">
+                      <tr>
+                        <td class="title_box">
+                          <div class="left_box">题目</div>
+                        </td>
+                        <td>
+                          {{e.index_number + 1 }}
+                        </td>
+                      </tr>
                       <tr>
                         <td class="title_box">
                           <div class="left_box">我的结果</div>
@@ -131,6 +135,33 @@
                         </td>
                       </tr>
                     </table>
+                    <el-row  style="padding-bottom:20px">
+                      <el-col :span="24" style="padding-top:10px">
+                        个人笔记:
+                      </el-col>
+                      <el-col :span="24"><el-input type="textarea" :rows="3" v-model="detailed_information.note[e.id].note_info" placeholder="请填写要记录的内容" ></el-input></el-col>
+                      <el-col :span="24" v-if="detailed_information.note[e.id].image" style="padding-top:10px">
+                        <img :src="IP+detailed_information.note[e.id].image" style="width: 90%;" alt="">
+                      </el-col>
+                      <el-col :span="12" style="padding-top:10px">
+                          <el-upload
+                          name="image"
+                          :accept="'image/*'"
+                          style="display: inline-block"
+                          :action="
+                            IP + '/student/test_results/takeDownimage/' + e.id
+                          "
+                          :on-change="uploadSubmit"
+                          :on-success="handleAvatarSuccess"
+                          :headers="headers"
+                          :show-file-list="false"
+                        >
+                          <el-button style="padding-top:10px ;width: 130px;"  type="primary" class="reupload_box">上传图片</el-button>
+                        </el-upload>
+                      </el-col>
+                      <el-col :span="12" style="padding-top:10px"> <el-button style="width: 130px;"  type="primary" @click="saveNote(e.id)">保存笔记</el-button> </el-col>
+                    </el-row>
+                    
                   </div>
                   <span slot="reference"> 
                     {{ detailed_information.test_results[e.id] || '暂无' }}
@@ -204,6 +235,7 @@ import { array_conversion } from '@/utils/tool';
 import Summary from './components/summary-view';
 import StudentComments from './components/student_comments_view.vue';
 import OverallAppraisal from './components/overall_appraisal_view.vue';
+import { getToken } from '@/utils/auth';
 
 export default {
   name: '',
@@ -216,6 +248,9 @@ export default {
   },
   data() {
     return {
+      note_id:null,
+      headers: { Authorization: ' Bearer  ' + getToken() },
+      node_is_loading:false,
       ImageZoomUrl: null,
       is_ImageZoom: false,
       IP: process.env.VUE_APP_BASE_API,
@@ -263,6 +298,22 @@ export default {
   },
 
   methods: {
+    uploadSubmit(file, fileList) {
+      if (file && (file.status == 'success' || file.status == 'error')) {
+        this.node_is_loading = false;
+      } else {
+        this.node_is_loading = true;
+      }
+    },
+    handleAvatarSuccess(res, file) {
+      if (res.code == 200 && res.message) {
+        this.node_is_loading = false;
+        this.detailed_information.note[this.note_id].image = res.message;
+      } else if (res.err_code == 201) {
+        this.node_is_loading = false;
+        this.$message.error(res.message);
+      }
+    },
     init() {
       this.getTestResultsDetail();
     },
@@ -367,7 +418,15 @@ export default {
         // console.log(new_arr);
         // console.log(new_arr);
         this.questions_list = new_arr;
-        
+        for(let i of Object.keys(res.test_results)){
+          if(!res.note[i]){
+            res.note[i]={
+              image: '',
+              note_info:''
+            }
+          }
+        }
+        console.log(res)
         this.detailed_information = res;
       });
     },