diff --git a/docs/component/upload.md b/docs/component/upload.md
index f9dc14cb..ed435851 100644
--- a/docs/component/upload.md
+++ b/docs/component/upload.md
@@ -97,6 +97,19 @@ const action: string = 'https://mockapi.eolink.com/zhTuw2P8c29bc981a741931bdd86e
>
```
+## 关闭预览点击文件替换
+
+上传组件可通过设置 `use-preview` 来关闭文件预览并启用点击文件替换。
+
+```html
+
+```
+
## 拦截预览图片操作
设置 `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 | - | - | - |
diff --git a/src/pages/upload/Index.vue b/src/pages/upload/Index.vue
index ba2463fd..417f1adf 100644
--- a/src/pages/upload/Index.vue
+++ b/src/pages/upload/Index.vue
@@ -11,6 +11,9 @@
+
+
+
@@ -121,6 +124,11 @@ const fileList16 = ref([
name: 'panda'
}
])
+const fileList17 = ref([
+ {
+ url: 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg'
+ }
+])
const upload14 = ref()
diff --git a/src/uni_modules/wot-design-uni/components/wd-upload/types.ts b/src/uni_modules/wot-design-uni/components/wd-upload/types.ts
index 6f74b505..fdc766bf 100644
--- a/src/uni_modules/wot-design-uni/components/wd-upload/types.ts
+++ b/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
diff --git a/src/uni_modules/wot-design-uni/components/wd-upload/wd-upload.vue b/src/uni_modules/wot-design-uni/components/wd-upload/wd-upload.vue
index b9c15efa..2f67c438 100644
--- a/src/uni_modules/wot-design-uni/components/wd-upload/wd-upload.vue
+++ b/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)
}
}