mirror of
https://gitee.com/wot-design-uni/wot-design-uni.git
synced 2025-12-06 17:18:40 +08:00
feat: ✨ Upload 支持文件重传
This commit is contained in:
kqswzhyb
GitHub
parent
6f58e72b1d
commit
3cd5137129
@ -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 | - | - | - |
|
||||
|
||||
@ -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>()
|
||||
|
||||
|
||||
@ -316,6 +316,11 @@ export const uploadProps = {
|
||||
* 类型：boolean
|
||||
*/
|
||||
autoUpload: makeBooleanProp(true),
|
||||
/**
|
||||
* 是否点击已上传的图片或视频可预览，值为false的情况下再次弹出上传
|
||||
* 类型：boolean
|
||||
*/
|
||||
usePreview: makeBooleanProp(true),
|
||||
/**
|
||||
* 自定义上传文件的请求方法
|
||||
* 类型：UploadMethod
|
||||
|
||||
@ -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)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user