【需求 17679】 perf: 继续优化上传文件组件,加入loading,百分比等

src/components/common/PublishBox/index.vue

@@ -60,6 +60,7 @@
             v-if="form.imgUrl.length"
             class="flex flex-wrap gap-2 w-fit"
             v-loading="uploadPercent > 0"
+            :element-loading-text="uploadPercent + '%'"
           >
             <!-- 删除图片 -->
             <div
@@ -118,9 +119,11 @@
               text
               class="w-10 h-10 text-gray-500 hover:bg-gray-100 hover:text-gray-700 rounded-lg"
               @click="fileInputRef?.click()"
+              :disabled="uploadPercent > 0"
             >
               <el-icon size="18">
-                <IEpPicture />
+                <span v-if="!form.imgUrl.length && uploadPercent > 0"> <IEpLoading /></span>
+                <span v-else> <IEpPicture /></span>
               </el-icon>
             </el-button>
           </el-tooltip>

src/components/common/UploadFile/index.vue

@@ -13,6 +13,8 @@
     :multiple="multiple"
     :limit="limit"
     class="custom-upload"
+    v-loading="uploadPercent > 0"
+    :element-loading-text="uploadPercent + '%'"
   >
     <el-icon><Plus /></el-icon>
     <el-dialog :append-to-body="true" v-model="dialogVisible">
@@ -40,6 +42,7 @@ const fileList = ref<UploadUserFile[]>([])
 const uploadRef = useTemplateRef('uploadRef')
 const dialogImageUrl = ref('')
 const dialogVisible = ref(false)
+const uploadPercent = ref(0)
 
 const isArrayType = computed(() => Array.isArray(modelValue.value))
 const hasReachedLimit = computed(() => fileList.value.length >= props.limit)
@@ -129,9 +132,12 @@ const handleChange: UploadProps['onChange'] = async (uploadFile, uploadFiles) =>
       const { promise } = uploadFileApi(uploadFile.raw, {
         onProgress: (progress) => {
           console.log('progress', progress)
+          uploadPercent.value = progress
         },
       })
+
       const data = await promise
+
       console.log('data', data)
       const url = data.filePath || ''
       const name = data.finalName || ''
@@ -157,6 +163,8 @@ const handleChange: UploadProps['onChange'] = async (uploadFile, uploadFiles) =>
       if (fileIndex !== -1) {
         fileList.value.splice(fileIndex, 1)
       }
+    } finally {
+      uploadPercent.value = 0
     }
   }
 }

src/hooks/useUploadImg.ts

@@ -8,20 +8,24 @@ export const useUploadImg = (imgList: Ref<string[]> = ref([])) => {
 
   // 上传图片的change事件
   const handleFileChange = async (e: Event) => {
-    const file = (e.target as HTMLInputElement).files?.[0]
-    if (!file) return
+    try {
+      const file = (e.target as HTMLInputElement).files?.[0]
+      if (!file) return
 
-    const { promise } = uploadFile(file, {
-      onProgress: (progress) => {
-        uploadPercent.value = progress
-      },
-    })
-    const data = await promise
-    imgList.value.push(data.filePath)
-
-    uploadPercent.value = 0
-    // 重置input的value
-    ;(e.target as HTMLInputElement).value = ''
+      const { promise } = uploadFile(file, {
+        onProgress: (progress) => {
+          uploadPercent.value = progress
+        },
+      })
+      const data = await promise
+      imgList.value.push(data.filePath)
+    } catch (error) {
+      console.error('上传失败:', error)
+    } finally {
+      uploadPercent.value = 0
+      // 重置input的value
+      ;(e.target as HTMLInputElement).value = ''
+    }
   }
 
   // 删除图片

src/views/publishLongArticle/index.vue

@@ -93,7 +93,7 @@
           <!-- 帖子 专栏专访 是富文本 需要上传封面图 封面图 -->
           <template v-else>
             <el-form-item label="封面图" prop="faceUrl">
-              <UploadFile v-model="form.faceUrl" :limit="1" class="w-full" />
+              <UploadFile class="w-fit" v-model="form.faceUrl" :limit="1" />
             </el-form-item>
           </template>