mirror of
https://gitee.com/wot-design-uni/wot-design-uni.git
synced 2025-12-07 01:28:30 +08:00
refactor: ♻️ 重构 Upload 覆盖上传相关逻辑 (#764)
This commit is contained in:
不如摸鱼去
GitHub
parent
3cd5137129
commit
ceb0ac027d
@ -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 | - | - | - |
|
||||
|
||||
@ -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="关闭预览点击文件替换">
|
||||
<wd-upload accept="image" :use-preview="false" v-model:file-list="fileList17" image-mode="aspectFill" :action="action"></wd-upload>
|
||||
<demo-block title="覆盖上传">
|
||||
<!-- #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>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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 lists = uploadFiles.value.filter((file) => isImage(file))
|
||||
const index: number = lists.findIndex((item) => item.url === file.url)
|
||||
if (usePreview) {
|
||||
const { beforePreview, reupload } = props
|
||||
const fileList = deepClone(uploadFiles.value)
|
||||
const index: number = fileList.findIndex((item) => item.url === file.url)
|
||||
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 &&
|
||||
handlePreviewImage(
|
||||
index,
|
||||
lists.map((file) => file.url)
|
||||
)
|
||||
isPass && handlePreviewImage(imgIndex, imgList)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
handlePreviewImage(
|
||||
index,
|
||||
lists.map((file) => file.url)
|
||||
)
|
||||
handlePreviewImage(imgIndex, imgList)
|
||||
}
|
||||
} else {
|
||||
handleChoose(index)
|
||||
}
|
||||
}
|
||||
|
||||
function onPreviewVideo(file: UploadFileItem) {
|
||||
const { beforePreview, usePreview } = props
|
||||
const lists = uploadFiles.value.filter((file) => isVideo(file))
|
||||
const index: number = lists.findIndex((item) => item.url === file.url)
|
||||
if (usePreview) {
|
||||
const { beforePreview, reupload } = props
|
||||
const fileList = deepClone(uploadFiles.value)
|
||||
const index: number = fileList.findIndex((item) => item.url === file.url)
|
||||
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 lists = uploadFiles.value.filter((file) => {
|
||||
return !isVideo(file) && !isImage(file)
|
||||
})
|
||||
const index: number = lists.findIndex((item) => item.url === file.url)
|
||||
if (usePreview) {
|
||||
const { beforePreview, reupload } = props
|
||||
const fileList = deepClone(uploadFiles.value)
|
||||
const index: number = fileList.findIndex((item) => item.url === file.url)
|
||||
if (reupload) {
|
||||
handleChoose(index)
|
||||
} 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)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user