意见反馈图片上传问题

src/components/feedBack/index.vue

@@ -97,6 +97,7 @@
         <el-form-item :label="$t('feedBack:form:screenshot')" prop="screenshot">
           <uploadImage
             :path.sync="form.ScreenshotList"
+            :isUpload.sync="loading"
             :disabled="type === 'detail'"
             ref="uploadImage"
           />
@@ -209,6 +210,7 @@ export default {
           },
         ],
       },
+      isUpload: false,
     };
   },
   computed: {

src/components/feedBack/uploadImage.vue

@@ -15,13 +15,24 @@
       list-type="picture-card"
     >
       <i slot="default" class="el-icon-plus"></i>
-      <div slot="file" slot-scope="{ file }">
-        <viewer :ref="file.url" :images="fileList">
+      <div slot="file" slot-scope="{ file }" style="width: 100%; height: 100%">
+        <viewer
+          :ref="file.url"
+          :images="fileList"
+          style="
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            height: 100%;
+          "
+        >
           <img
             class="el-upload-list__item-thumbnail"
             :src="`${file.url}`"
             alt=""
             crossorigin="anonymous"
+            style="max-width: 100%; max-height: 100%"
           />
           <span class="el-upload-list__item-actions" v-if="!isUpload">
             <span
@@ -61,12 +72,15 @@ export default {
       required: true,
       default: false,
     },
+    isUpload: {
+      required: true,
+      default: false,
+    },
   },
   data() {
     return {
       fileList: [],
       btnDisabled: false,
-      isUpload: false,
     };
   },
   methods: {
@@ -122,19 +136,29 @@ export default {
     },
     async uploadFile(param) {
       var fileName = param.file.name;
-      this.isUpload = true;
+      this.$emit("update:isUpload", true);
       this.btnDisabled = true;
+      this.fileList.push({
+        url: param.file.url,
+        path: fileName,
+        uid: param.file.uid,
+      });
       let file = await this.fileToBlob(param.file);
       let res = await this.uploadToOSS(fileName, file);
       this.btnDisabled = false;
-      if (!res) return (this.isUpload = false);
-      this.fileList.push({
-        url: this.OSSclientConfig.basePath + res.name,
-        path: res.name,
-        uid: param.file.uid,
-      });
+      let index = this.fileList.findIndex(
+        (item) => item.uid === param.file.uid
+      );
+      if (!res) {
+        if (index >= 0) {
+          this.fileList.splice(index, 1);
+        }
+        return this.$emit("update:isUpload", false);
+      }
+      this.fileList[index].url = this.OSSclientConfig.basePath + res.name;
+      this.fileList[index].path = res.name;
       this.$emit("update:path", [...this.path, res.name]);
-      this.isUpload = false;
+      this.$emit("update:isUpload", false);
       return false;
     },
     beforeUpload(file, fileList) {
@@ -216,4 +240,8 @@ export default {
   align-items: center;
   justify-content: center;
 }
+.el-upload-list--picture-card .el-upload-list__item-thumbnail {
+  width: auto;
+  height: auto;
+}
 </style>