From 3cd5137129ae13f90744a5d0038686cef5602d8c Mon Sep 17 00:00:00 2001 From: kqswzhyb <43646172+kqswzhyb@users.noreply.github.com> Date: Fri, 6 Dec 2024 12:45:49 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E2=9C=A8=20Upload=20=E6=94=AF=E6=8C=81?= =?UTF-8?q?=E6=96=87=E4=BB=B6=E9=87=8D=E4=BC=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/component/upload.md | 14 +++ src/pages/upload/Index.vue | 8 ++ .../components/wd-upload/types.ts | 5 + .../components/wd-upload/wd-upload.vue | 111 ++++++++++-------- 4 files changed, 90 insertions(+), 48 deletions(-) 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) } }