Просмотр исходного кода

fix(photo component): add loading state and prevent duplicate uploads

为图片上传按钮添加加载状态,并在上传过程中禁用重复触发,避免多次发起上传请求
lsc 4 дней назад
Родитель
Сommit
bcfff27cb7
1 измененных файлов с 8 добавлено и 2 удалено
  1. 8 2
      src/components/pages/workPage/components/photo.vue

+ 8 - 2
src/components/pages/workPage/components/photo.vue

@@ -20,7 +20,7 @@
 
     <!-- 操作按钮区域 -->
     <div class="upload-area">
-      <button class="photo-btn" @click="uploadImage">
+      <button class="photo-btn" @click="uploadImage" v-loading="uploadLoading">
         <span class="plus-icon">+</span>
         <span>{{ lang.ssTakePhoto }}</span>
       </button>
@@ -45,7 +45,8 @@ export default {
         fileList: []
       },
       recordObj: {},
-      isMobile: false
+      isMobile: false,
+      uploadLoading: false
     };
   },
   computed: {
@@ -96,6 +97,9 @@ export default {
       };
     },
     uploadImage() {
+      if(this.uploadLoading){
+        return
+      }
       const input = document.createElement('input');
       input.type = 'file';
       input.accept = 'image/*';
@@ -104,6 +108,7 @@ export default {
       input.onchange = (e) => {
         const files = e.target.files;
         if (files && files.length > 0) {
+          this.uploadLoading = true;
           const uploadPromises = [];
           for (let i = 0; i < files.length; i++) {
             uploadPromises.push(uploadOneFile(files[i]));
@@ -111,6 +116,7 @@ export default {
           Promise.all(uploadPromises).then(results => {
             const newImages = results.map(res => ({ ...res, src: res.url }));
             this.work.fileList = [...this.work.fileList, ...newImages];
+            this.uploadLoading = false;
             this.changeWorkData(this.work);
           });
         }