上传图片

src/views/technology-archives/TechnologyArchivesMain.vue

@@ -262,7 +262,24 @@
                 </el-table-column>
                 <el-table-column prop="image" label="图片链接">
                   <template v-slot="scope">
-                    <el-input v-if="scope.row.isEdit" size="small" v-model="scope.row.image"></el-input>
+                    <!-- <el-input  size="small" v-model="scope.row.image"></el-input>-->
+                    <div v-if="scope.row.isEdit">
+                      <el-upload
+                          class="upload-demo"
+                          ref="upload"
+                          :action="apiUrl + '/technologyArchives/putCertificateImage'"
+                          :headers="header"
+                          :file-list="fileList"
+                          :data="{ socialNo: scope.row.socialNo }"
+                          :on-success="uploadSuccess"
+                          :auto-upload="false"
+                      >
+                        <template #trigger>
+                          <el-button type="primary" icon="Picture">选取文件</el-button>
+                        </template>
+                        <el-button style="margin-left: 10px" type="success" icon="Upload" @click="submitUpload">上传到服务器</el-button>
+                      </el-upload>
+                    </div>
                     <span v-else>{{ scope.row.image }}</span>
                   </template>
                 </el-table-column>
@@ -329,7 +346,24 @@
                 </el-table-column>
                 <el-table-column prop="image" label="图片链接">
                   <template v-slot="scope">
-                    <el-input v-if="scope.row.isEdit" size="small" v-model="scope.row.image"></el-input>
+                    <!-- <el-input v-if="scope.row.isEdit" size="small" v-model="scope.row.image"></el-input> -->
+                    <div v-if="scope.row.isEdit">
+                      <el-upload
+                          class="upload-demo"
+                          ref="upload"
+                          :action="apiUrl + '/technologyArchives/putProImage'"
+                          :headers="header"
+                          :file-list="fileList"
+                          :data="{ socialNo: scope.row.socialNo }"
+                          :on-success="uploadSuccess"
+                          :auto-upload="false"
+                      >
+                        <template #trigger>
+                          <el-button type="primary" icon="Picture">选取文件</el-button>
+                        </template>
+                        <el-button style="margin-left: 10px" type="success" icon="Upload" @click="submitUpload">上传到服务器</el-button>
+                      </el-upload>
+                    </div>
                     <span v-else>{{ scope.row.image }}</span>
                   </template>
                 </el-table-column>
@@ -1609,6 +1643,25 @@ const cancelFirstInfo = (row, index) => {
   }
   firstKey.value = Math.random()
 }
+
+const apiUrl = import.meta.env.VITE_BASE_URL
+const fileList = ref([])
+const upload = ref(null)
+const header = {
+  token: localStorage.token,
+}
+const submitUpload = () => {
+  upload.value.submit()
+}
+const uploadSuccess = (response) =>{
+  if(response.code === 200){
+    firstData.value.image = response.data.image;
+    ElMessage.success('上传成功！')
+  }else{
+    return upload.status = 'fail';
+  }
+}
+
 // 保存
 const updateFirstInfo = (row) => {
   if (!row.socialNo || !row.getTime) {