【需求 17679】 perf: 优化上传图片 加入loading

src/components/common/PublishBox/index.vue

@@ -56,7 +56,11 @@
             </div>
           </div>
           <!-- 图片相关 -->
-          <div v-if="form.imgUrl.length" class="flex flex-wrap gap-2">
+          <div
+            v-if="form.imgUrl.length"
+            class="flex flex-wrap gap-2 w-fit"
+            v-loading="uploadPercent > 0"
+          >
             <!-- 删除图片 -->
             <div
               class="relative w-20 h-20 rounded-lg overflow-hidden group"
@@ -101,7 +105,14 @@
           </el-tooltip>
 
           <!-- 隐藏上传文件的input -->
-          <input type="file" class="hidden" ref="fileInputRef" @change="handleFileChange" />
+          <input
+            type="file"
+            class="hidden"
+            ref="fileInputRef"
+            @change="handleFileChange"
+            accept="image/*"
+            multiple
+          />
           <el-tooltip content="添加图片" placement="top">
             <el-button
               text
@@ -169,10 +180,9 @@
 import { useUserStore } from '@/stores'
 import { storeToRefs } from 'pinia'
 import SelectTagsDialog from './components/selectTagsDialog.vue'
-import { useResetData } from '@/hooks'
+import { useResetData, useUploadImg } from '@/hooks'
 import { ArticleTypeEnum, ReleaseStatusTypeEnum, SendTypeEnum } from '@/constants'
 import { useTagsStore } from '@/stores'
-import { uploadFile } from '@/api'
 import { addOrUpdatePractice, addOrUpdateArticle } from '@/api'
 import type { AddOrUpdatePracticeDto } from '@/api'
 import type { BooleanFlag } from '@/constants'
@@ -255,6 +265,10 @@ const [form, resetForm] = useResetData({
   sendTime: '',
 })
 
+const { imgsStr, handleFileChange, handleDeleteImg, uploadPercent } = useUploadImg(
+  toRef(form.value, 'imgUrl'),
+)
+
 const mainTagText = computed(() => {
   return tagList.value.find((tag) => tag.id === Number(form.value.mainTagId))?.title
 })
@@ -267,20 +281,6 @@ const handleAddTag = () => {
   selectTagsDialogRef.value?.open()
 }
 
-const handleFileChange = async (e: Event) => {
-  const file = (e.target as HTMLInputElement).files?.[0]
-  if (file) {
-    const { promise } = uploadFile(file)
-    const data = await promise
-    console.log(data)
-    form.value.imgUrl.push(data.filePath)
-  }
-}
-
-const handleDeleteImg = (img: string) => {
-  form.value.imgUrl = form.value.imgUrl.filter((item) => item !== img)
-}
-
 const validateForm = () => {
   if (!form.value.mainTagId) {
     ElMessage.warning({
@@ -300,7 +300,7 @@ const transformForm = (releaseStatus: ReleaseStatusTypeEnum): AddOrUpdatePractic
     ...form.value,
     releaseStatus,
     faceUrl: form.value.imgUrl[0] || '',
-    imgUrl: form.value.imgUrl.join(','),
+    imgUrl: imgsStr.value,
     tagList: [form.value.mainTagId, ...form.value.tagList].map((item, index) => ({
       sort: index,
       tagId: Number(item),

src/hooks/index.ts

@@ -2,3 +2,4 @@ export * from './useResetData'
 export * from './usePageSearch'
 export * from './useScrollTop'
 export * from './useHintAnimation'
+export * from './useUploadImg'

src/hooks/useUploadImg.ts

+import { uploadFile } from '@/api'
+
+// 默认参数
+export const useUploadImg = (imgList: Ref<string[]> = ref([])) => {
+  const uploadPercent = ref(0)
+  // 字符串拼
+  const imgsStr = computed(() => imgList.value.join(','))
+
+  // 上传图片的change事件
+  const handleFileChange = async (e: Event) => {
+    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 handleDeleteImg = (urlStr: string) => {
+    imgList.value = imgList.value.filter((item) => item !== urlStr)
+  }
+
+  return {
+    imgsStr,
+    imgList,
+    handleFileChange,
+    uploadPercent,
+    handleDeleteImg,
+  }
+}