反馈图片上传问题

src/components/feedBack/uploadImage.vue

@@ -23,7 +23,7 @@
             alt=""
             crossorigin="anonymous"
           />
-          <span class="el-upload-list__item-actions">
+          <span class="el-upload-list__item-actions" v-if="!isUpload">
             <span
               class="el-upload-list__item-preview"
               @click="handlePictureCardPreview(file)"
@@ -38,6 +38,9 @@
               <i class="el-icon-delete"></i>
             </span>
           </span>
+          <div class="loadingBox" v-else>
+            <i class="el-icon-loading" style="color: #fff; margin: auto"></i>
+          </div>
         </viewer>
       </div>
     </el-upload>
@@ -63,6 +66,7 @@ export default {
     return {
       fileList: [],
       btnDisabled: false,
+      isUpload: false,
     };
   },
   methods: {
@@ -118,17 +122,19 @@ export default {
     },
     async uploadFile(param) {
       var fileName = param.file.name;
+      this.isUpload = true;
       this.btnDisabled = true;
       let file = await this.fileToBlob(param.file);
       let res = await this.uploadToOSS(fileName, file);
       this.btnDisabled = false;
-      if (!res) return;
+      if (!res) return (this.isUpload = false);
       this.fileList.push({
         url: this.OSSclientConfig.basePath + res.name,
         path: res.name,
         uid: param.file.uid,
       });
       this.$emit("update:path", [...this.path, res.name]);
+      this.isUpload = false;
       return false;
     },
     beforeUpload(file, fileList) {
@@ -136,7 +142,7 @@ export default {
       if (isValidFile) {
         // this.fileList = [];
       } else {
-        this.$alert("请上传PNG/JPG/JPEG文件");
+        this.$alert(this.$t("feedBack:uploadImg:format"));
         return false;
       }
     },
@@ -197,4 +203,17 @@ export default {
   height: 100px;
   line-height: 100px;
 }
+.loadingBox {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  width: 100px;
+  height: 100px;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 </style>