admin/wot-design-uni
1
0
Fork 0
mirror of https://gitee.com/wot-design-uni/wot-design-uni.git synced 2025-12-06 17:18:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: ✨ Upload 支持文件重传

Browse Source
This commit is contained in:
kqswzhyb 2024-12-06 12:45:49 +08:00 committed by GitHub
parent 6f58e72b1d
commit 3cd5137129
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 90 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
docs/component/upload.md
View File

@ -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 | - | - | - |

8
src/pages/upload/Index.vue
View File

@ -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>()

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

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

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

@ -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
}
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,9 +620,10 @@ 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 (usePreview) {
if (beforePreview) {
beforePreview({
file,
@ -639,12 +643,16 @@ function onPreviewImage(file: UploadFileItem) {
lists.map((file) => file.url)
)
}
} else {
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 (usePreview) {
if (beforePreview) {
beforePreview({
file,
@ -657,14 +665,18 @@ function onPreviewVideo(file: UploadFileItem) {
} else {
handlePreviewVieo(index, lists)
}
} else {
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 (usePreview) {
if (beforePreview) {
beforePreview({
file,
@ -677,6 +689,9 @@ function onPreviewFile(file: UploadFileItem) {
} else {
handlePreviewFile(file)
}
} else {
handleChoose(index)
}
}
function isVideo(file: UploadFileItem) {