feat: 上传组件修改

src/components/CheckCoiumns/checkInputUpload.vue

@@ -23,37 +23,54 @@
           @input="input"
         >
         </el-input>
+
         <div
           style="width: 20rem; display: inline-block; vertical-align: middle"
         >
           {{ i.object }}
         </div>
+        <el-upload
+          class="upload-demo"
+          ref="fileUpload"
+          :action="uploadImgUrl"
+          :on-preview="handlePreview"
+          v-model="i.file"
+          :on-remove="handleRemove"
+          accept=".pdf ,.doc ,.docx ,.xls, .xlsx"
+          :before-remove="beforeRemove"
+          :show-file-list="false"
+          :limit="1"
+          :on-success="
+            res => {
+              handleSuccess(res, i)
+            }
+          "
+          :on-exceed="handleExceed"
+          :headers="headers"
+          >、
+          <!-- <el-button
+            size="small"
+            v-if="i.path"
+            v-loading="loading"
+            :disabled="status"
+            type="primary"
+            >{{ i.file_name }}</el-button
+          > -->
+          <el-button
+            size="small"
+            v-loading="loading"
+            :disabled="status"
+            type="primary"
+            >上传文件</el-button
+          >
+          <div slot="tip" class="el-upload__tip">
+            <div v-if="i.path">
+              <el-link :href="i.path">{{ i.file_name }}</el-link>
+            </div>
+          </div>
+        </el-upload>
       </div>
     </div>
-    <el-upload
-      class="upload-demo"
-      ref="fileUpload"
-      :action="uploadImgUrl"
-      :on-preview="handlePreview"
-      v-model="model.file"
-      :on-remove="handleRemove"
-      accept=".pdf"
-      :before-remove="beforeRemove"
-      :show-file-list="false"
-      :limit="1"
-      :on-success="handleSuccess"
-      :on-exceed="handleExceed"
-      :headers="headers"
-    >
-      <el-button size="small" :disabled="status" type="primary"
-        >上传文件</el-button
-      >
-      <div slot="tip" class="el-upload__tip">
-        <div v-if="model.path">
-          <el-link :href="model.path">{{ model.name }}</el-link>
-        </div>
-      </div>
-    </el-upload>
   </div>
 </template>
 <script>
@@ -83,11 +100,9 @@ export default {
     return {
       model: {
         value: '',
-        list: [],
-        file: '',
-        path: '',
-        name: ''
+        list: []
       },
+      loading: false,
       headers: {
         Authorization: 'Bearer ' + this.$store.getters.token
       },
@@ -172,6 +187,9 @@ export default {
           value: '',
           check: false,
           useCaseNo: i.useCaseNo,
+          path: '',
+          file: '',
+          file_name: '',
           key: i.value,
           id: i.id,
           flag: i.flag
@@ -183,13 +201,18 @@ export default {
     },
     handlePreview(file) {
       console.log(file)
+      this.loading = true
     },
-    handleSuccess(res, file) {
+    handleSuccess(res, item) {
+      console.log(res, item)
+
       if (res.code === 200) {
-        this.model.path = process.env.VUE_APP_IMAGE_API + res.url
-        this.model.name = res.originalFilename
-        this.$refs.fileUpload.clearFiles()
+        this.loading = false
+        // const item = this.model.list[k]
+        item.path = process.env.VUE_APP_IMAGE_API + res.url
+        item.file_name = res.originalFilename
         this.$message.success('上传成功')
+        this.$forceUpdate()
       } else {
         this.$message.error('error')
       }