质保单上传整体结构

klp-ui/src/components/FileUpload/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="upload-file">
+  <div class="upload-file" v-loading="loading" element-loading-text="正在获取文件">
     <el-upload
       multiple
       :action="uploadFileUrl"
@@ -61,7 +61,7 @@ export default {
     // 文件类型, 例如['png', 'jpg', 'jpeg']
     fileType: {
       type: Array,
-      default: () => ["doc", "xls", "ppt", "txt", "pdf"],
+      default: () => ["doc", "xls", "ppt", "txt", "pdf", 'png', 'jpg', 'jpeg', 'bmp', 'webp'],
     },
     // 是否显示提示
     isShowTip: {
@@ -79,6 +79,7 @@ export default {
         Authorization: "Bearer " + getToken(),
       },
       fileList: [],
+      loading: false,
     };
   },
   watch: {
@@ -91,11 +92,15 @@ export default {
           if (Array.isArray(val)) {
             list = val;
           } else {
+            this.loading = true;
             await listByIds(val).then(res => {
               list = res.data.map(oss => {
                 oss = { name: oss.originalName, url: oss.url, ossId: oss.ossId };
                 return oss;
               });
+
+            }).finally(() => {
+              this.loading = false;
             })
           }
           // 然后将数组转为对象数组