feat: ✨ Upload 支持文件重传

Author: kqswzhyb

docs/component/upload.md

@@ -97,6 +97,19 @@ const action: string = 'https://mockapi.eolink.com/zhTuw2P8c29bc981a741931bdd86e
 ></wd-upload>
 ```
 
+## 关闭预览点击文件替换
+
+上传组件可通过设置 `use-preview` 来关闭文件预览并启用点击文件替换。
+
+```html
+<wd-upload
+  :file-list="fileList"
+  :use-preview="false"
+  action="https://mockapi.eolink.com/zhTuw2P8c29bc981a741931bdd86eb04dc1e8fd64865cb5/upload"
+  @change="handleChange"
+></wd-upload>
+```
+
 ## 拦截预览图片操作
 
 设置 `before-preview` 函数，在用户点击图片进行预览时，会执行 `before-preview` 函数，接收 { file: 预览文件, index: 当前预览的下标, imgList: 所有图片地址列表, resolve }，通过 `resolve` 函数告知组件是否确定通过，`resolve` 接受 1 个 boolean 值，`resolve(true)` 表示选项通过，`resolve(false)` 表示选项不通过，不通过时不会执行预览图片操作。
@@ -601,6 +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 |
 | limit                         | 最大允许上传个数                                                                                                                                                               | number                                 | -                                              | -                          | -                |
 | show-limit-num                | 限制上传个数的情况下，是否展示当前上传的个数                                                                                                                                   | boolean                                | -                                              | false                      | -                |
 | max-size                      | 文件大小限制，单位为`byte`                                                                                                                                                     | number                                 | -                                              | -                          | -                |

src/pages/upload/Index.vue

@@ -11,6 +11,9 @@
     <demo-block title="最大上传数限制">
       <wd-upload :file-list="fileList3" :limit="3" :action="action" @change="handleChange3"></wd-upload>
     </demo-block>
+    <demo-block title="关闭预览点击文件替换">
+      <wd-upload accept="image" :use-preview="false" v-model:file-list="fileList17" image-mode="aspectFill" :action="action"></wd-upload>
+    </demo-block>
     <demo-block title="拦截预览图片操作">
       <wd-upload :file-list="fileList4" :action="action" @change="handleChange4" :before-preview="beforePreview"></wd-upload>
     </demo-block>
@@ -121,6 +124,11 @@ const fileList16 = ref<UploadFile[]>([
     name: 'panda'
   }
 ])
+const fileList17 = ref<UploadFile[]>([
+  {
+    url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg'
+  }
+])
 
 const upload14 = ref<UploadInstance>()
 

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

@@ -316,6 +316,11 @@ export const uploadProps = {
    * 类型：boolean
    */
   autoUpload: makeBooleanProp(true),
+  /**
+   * 是否点击已上传的图片或视频可预览，值为false的情况下再次弹出上传
+   * 类型：boolean
+   */
+  usePreview: makeBooleanProp(true),
   /**
    * 自定义上传文件的请求方法
    * 类型：UploadMethod

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

@@ -325,7 +325,7 @@ function getImageInfo(img: string) {
  * @description 初始化文件数据
  * @param {Object} file 上传的文件
  */
-function initFile(file: ChooseFile) {
+function initFile(file: ChooseFile, currentIndex?: number) {
   const { statusKey } = props
   // 状态初始化
   const initState: UploadFileItem = {
@@ -338,8 +338,11 @@ function initFile(file: ChooseFile) {
     url: file.path,
     percent: 0
   }
-
-  uploadFiles.value.push(initState)
+  if (typeof currentIndex === 'number') {
+    uploadFiles.value.splice(currentIndex, 1, initState)
+  } else {
+    uploadFiles.value.push(initState)
+  }
   if (props.autoUpload) {
     startUploadFiles()
   }
@@ -442,7 +445,7 @@ function handleProgress(res: UniApp.OnProgressUpdateResult, file: UploadFileItem
 /**
  * @description 选择文件的实际操作，将chooseFile自己用promise包了一层
  */
-function onChooseFile() {
+function onChooseFile(currentIndex?: number) {
   const { multiple, maxSize, accept, sizeType, limit, sourceType, compressed, maxDuration, camera, beforeUpload } = props
   // 文件选择
   chooseFile({
@@ -470,7 +473,7 @@ function onChooseFile() {
             const imageInfo = await getImageInfo(file.path)
             file.size = imageInfo.width * imageInfo.height
           }
-          Number(file.size) <= maxSize ? initFile(file) : emit('oversize', { file })
+          Number(file.size) <= maxSize ? initFile(file, currentIndex) : emit('oversize', { file })
         }
       }
 
@@ -495,7 +498,7 @@ function onChooseFile() {
 /**
  * @description 选择文件，内置拦截选择操作
  */
-function handleChoose() {
+function handleChoose(index?: number) {
   if (props.disabled) return
   const { beforeChoose } = props
 
@@ -504,11 +507,11 @@ function handleChoose() {
     beforeChoose({
       fileList: uploadFiles.value,
       resolve: (isPass: boolean) => {
-        isPass && onChooseFile()
+        isPass && onChooseFile(index)
       }
     })
   } else {
-    onChooseFile()
+    onChooseFile(index)
   }
 }
 
@@ -617,65 +620,77 @@ function handlePreviewVieo(index: number, lists: UploadFileItem[]) {
 }
 
 function onPreviewImage(file: UploadFileItem) {
-  const { beforePreview } = props
+  const { beforePreview, usePreview } = props
   const lists = uploadFiles.value.filter((file) => isImage(file))
   const index: number = lists.findIndex((item) => item.url === file.url)
-  if (beforePreview) {
-    beforePreview({
-      file,
-      index,
-      imgList: lists.map((file) => file.url),
-      resolve: (isPass: boolean) => {
-        isPass &&
-          handlePreviewImage(
-            index,
-            lists.map((file) => file.url)
-          )
-      }
-    })
+  if (usePreview) {
+    if (beforePreview) {
+      beforePreview({
+        file,
+        index,
+        imgList: lists.map((file) => file.url),
+        resolve: (isPass: boolean) => {
+          isPass &&
+            handlePreviewImage(
+              index,
+              lists.map((file) => file.url)
+            )
+        }
+      })
+    } else {
+      handlePreviewImage(
+        index,
+        lists.map((file) => file.url)
+      )
+    }
   } else {
-    handlePreviewImage(
-      index,
-      lists.map((file) => file.url)
-    )
+    handleChoose(index)
   }
 }
 
 function onPreviewVideo(file: UploadFileItem) {
-  const { beforePreview } = props
+  const { beforePreview, usePreview } = props
   const lists = uploadFiles.value.filter((file) => isVideo(file))
   const index: number = lists.findIndex((item) => item.url === file.url)
-  if (beforePreview) {
-    beforePreview({
-      file,
-      index,
-      imgList: [],
-      resolve: (isPass: boolean) => {
-        isPass && handlePreviewVieo(index, lists)
-      }
-    })
+  if (usePreview) {
+    if (beforePreview) {
+      beforePreview({
+        file,
+        index,
+        imgList: [],
+        resolve: (isPass: boolean) => {
+          isPass && handlePreviewVieo(index, lists)
+        }
+      })
+    } else {
+      handlePreviewVieo(index, lists)
+    }
   } else {
-    handlePreviewVieo(index, lists)
+    handleChoose(index)
   }
 }
 
 function onPreviewFile(file: UploadFileItem) {
-  const { beforePreview } = props
+  const { beforePreview, usePreview } = props
   const lists = uploadFiles.value.filter((file) => {
     return !isVideo(file) && !isImage(file)
   })
   const index: number = lists.findIndex((item) => item.url === file.url)
-  if (beforePreview) {
-    beforePreview({
-      file,
-      index,
-      imgList: [],
-      resolve: (isPass: boolean) => {
-        isPass && handlePreviewFile(file)
-      }
-    })
+  if (usePreview) {
+    if (beforePreview) {
+      beforePreview({
+        file,
+        index,
+        imgList: [],
+        resolve: (isPass: boolean) => {
+          isPass && handlePreviewFile(file)
+        }
+      })
+    } else {
+      handlePreviewFile(file)
+    }
   } else {
-    handlePreviewFile(file)
+    handleChoose(index)
   }
 }