refactor: ♻️ 重构 Upload 覆盖上传相关逻辑 (#764)

docs/component/upload.md

@@ -97,14 +97,14 @@ const action: string = 'https://mockapi.eolink.com/zhTuw2P8c29bc981a741931bdd86e
 ></wd-upload>
 ```
 
-## 关闭预览点击文件替换
+## 覆盖上传
 
-上传组件可通过设置 `use-preview` 来关闭文件预览并启用点击文件替换。
+上传组件可通过设置 `reupload` 来实现在选中时自动替换上一个文件。
 
 ```html
 <wd-upload
   :file-list="fileList"
-  :use-preview="false"
+  reupload
   action="https://mockapi.eolink.com/zhTuw2P8c29bc981a741931bdd86eb04dc1e8fd64865cb5/upload"
   @change="handleChange"
 ></wd-upload>
@@ -614,7 +614,7 @@ const action: string = 'https://mockapi.eolink.com/zhTuw2P8c29bc981a741931bdd86e
 | header                        | 设置上传的请求头部                                                                                                                                                             | object                                 | -                                              | -                          | -                |
 | multiple                      | 是否支持多选文件                                                                                                                                                               | boolean                                | -                                              | -                          | -                |
 | disabled                      | 是否禁用                                                                                                                                                                       | boolean                                | -                                              | false                      | -                |
-| use-preview                 | 是否点击已上传的图片或视频可预览，值为false的情况下再次弹出上传                                                                                                                                                     | boolean                                | -                                              | true                       | 1.3.15 |
+| reupload    | 是否开启覆盖上传，开启后会关闭图片预览   | boolean          | -                                              | false                       | $LOWEST_VERSION$ |
 | limit                         | 最大允许上传个数                                                                                                                                                               | number                                 | -                                              | -                          | -                |
 | show-limit-num                | 限制上传个数的情况下，是否展示当前上传的个数                                                                                                                                   | boolean                                | -                                              | false                      | -                |
 | max-size                      | 文件大小限制，单位为`byte`                                                                                                                                                     | number                                 | -                                              | -                          | -                |

src/pages/upload/Index.vue

@@ -11,8 +11,15 @@
     <demo-block title="最大上传数限制">
       <wd-upload :file-list="fileList3" :limit="3" :action="action" @change="handleChange3"></wd-upload>
     </demo-block>
-    <demo-block title="关闭预览点击文件替换">
+    <demo-block title="覆盖上传">
-      <wd-upload accept="image" :use-preview="false" v-model:file-list="fileList17" image-mode="aspectFill" :action="action"></wd-upload>
+      <!-- #ifdef MP-WEIXIN || H5  -->
+      <wd-upload accept="all" reupload v-model:file-list="fileList17" image-mode="aspectFill" :action="action"></wd-upload>
+      <!-- #endif -->
+      <!-- #ifndef MP-WEIXIN -->
+      <!-- #ifndef H5 -->
+      <wd-upload accept="image" reupload v-model:file-list="fileList17" image-mode="aspectFill" :action="action"></wd-upload>
+      <!-- #endif -->
+      <!-- #endif -->
     </demo-block>
     <demo-block title="拦截预览图片操作">
       <wd-upload :file-list="fileList4" :action="action" @change="handleChange4" :before-preview="beforePreview"></wd-upload>

src/uni_modules/wot-design-uni/components/wd-upload/types.ts

@@ -67,6 +67,7 @@ export type UploadBeforePreviewOption = {
   file: UploadFileItem
   index: number
   imgList: string[]
+  fileList: UploadFileItem[]
   resolve: (isPass: boolean) => void
 }
 export type UploadBeforePreview = (option: UploadBeforePreviewOption) => void
@@ -317,10 +318,10 @@ export const uploadProps = {
    */
   autoUpload: makeBooleanProp(true),
   /**
-   * 是否点击已上传的图片或视频可预览，值为false的情况下再次弹出上传
+   * 点击已上传时是否可以重新上传
    * 类型：boolean
    */
-  usePreview: makeBooleanProp(true),
+  reupload: makeBooleanProp(true),
   /**
    * 自定义上传文件的请求方法
    * 类型：UploadMethod

src/uni_modules/wot-design-uni/components/wd-upload/utils.ts

@@ -1,7 +1,7 @@
 /*
  * @Author: weisheng
  * @Date: 2024-03-18 22:36:44
- * @LastEditTime: 2024-07-07 18:59:40
+ * @LastEditTime: 2024-12-07 18:08:48
  * @LastEditors: weisheng
  * @Description:
  * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-upload/utils.ts

src/uni_modules/wot-design-uni/components/wd-upload/wd-upload.vue

@@ -101,7 +101,7 @@ import wdVideoPreview from '../wd-video-preview/wd-video-preview.vue'
 import wdLoading from '../wd-loading/wd-loading.vue'
 
 import { computed, ref, watch } from 'vue'
-import { context, getType, isEqual, isImageUrl, isVideoUrl, isFunction, isDef } from '../common/util'
+import { context, getType, isEqual, isImageUrl, isVideoUrl, isFunction, isDef, deepClone } from '../common/util'
 import { chooseFile } from './utils'
 import { useTranslate } from '../composables/useTranslate'
 import {
@@ -620,68 +620,68 @@ function handlePreviewVieo(index: number, lists: UploadFileItem[]) {
 }
 
 function onPreviewImage(file: UploadFileItem) {
-  const { beforePreview, usePreview } = props
+  const { beforePreview, reupload } = props
-  const lists = uploadFiles.value.filter((file) => isImage(file))
+  const fileList = deepClone(uploadFiles.value)
-  const index: number = lists.findIndex((item) => item.url === file.url)
+  const index: number = fileList.findIndex((item) => item.url === file.url)
-  if (usePreview) {
+  const imgList = fileList.filter((file) => isImage(file)).map((file) => file.url)
+  const imgIndex: number = imgList.findIndex((item) => item === file.url)
+  if (reupload) {
+    handleChoose(index)
+  } else {
     if (beforePreview) {
       beforePreview({
         file,
         index,
-        imgList: lists.map((file) => file.url),
+        fileList: fileList,
+        imgList: imgList,
         resolve: (isPass: boolean) => {
-          isPass &&
+          isPass && handlePreviewImage(imgIndex, imgList)
-            handlePreviewImage(
-              index,
-              lists.map((file) => file.url)
-            )
         }
       })
     } else {
-      handlePreviewImage(
+      handlePreviewImage(imgIndex, imgList)
-        index,
-        lists.map((file) => file.url)
-      )
     }
-  } else {
-    handleChoose(index)
   }
 }
 
 function onPreviewVideo(file: UploadFileItem) {
-  const { beforePreview, usePreview } = props
+  const { beforePreview, reupload } = props
-  const lists = uploadFiles.value.filter((file) => isVideo(file))
+  const fileList = deepClone(uploadFiles.value)
-  const index: number = lists.findIndex((item) => item.url === file.url)
+  const index: number = fileList.findIndex((item) => item.url === file.url)
-  if (usePreview) {
+  const videoList = fileList.filter((file) => isVideo(file))
+  const videoIndex: number = videoList.findIndex((item) => item.url === file.url)
+  if (reupload) {
+    handleChoose(index)
+  } else {
     if (beforePreview) {
       beforePreview({
         file,
         index,
         imgList: [],
+        fileList,
         resolve: (isPass: boolean) => {
-          isPass && handlePreviewVieo(index, lists)
+          isPass && handlePreviewVieo(videoIndex, videoList)
         }
       })
     } else {
-      handlePreviewVieo(index, lists)
+      handlePreviewVieo(videoIndex, videoList)
     }
-  } else {
-    handleChoose(index)
   }
 }
 
 function onPreviewFile(file: UploadFileItem) {
-  const { beforePreview, usePreview } = props
+  const { beforePreview, reupload } = props
-  const lists = uploadFiles.value.filter((file) => {
+  const fileList = deepClone(uploadFiles.value)
-    return !isVideo(file) && !isImage(file)
+  const index: number = fileList.findIndex((item) => item.url === file.url)
-  })
+  if (reupload) {
-  const index: number = lists.findIndex((item) => item.url === file.url)
+    handleChoose(index)
-  if (usePreview) {
+  } else {
     if (beforePreview) {
       beforePreview({
         file,
         index,
         imgList: [],
+        fileList,
         resolve: (isPass: boolean) => {
           isPass && handlePreviewFile(file)
         }
@@ -689,8 +689,6 @@ function onPreviewFile(file: UploadFileItem) {
     } else {
       handlePreviewFile(file)
     }
-  } else {
-    handleChoose(index)
   }
 }