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组件beforePreview新增file参数 (#598)

Browse Source
This commit is contained in:
chenzq 2024-09-18 09:33:43 +08:00 committed by GitHub
parent cae2e56aba
commit 6027b39ae8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 9 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/component/upload.md
View File

@ -99,7 +99,7 @@ const action: string = 'https://mockapi.eolink.com/zhTuw2P8c29bc981a741931bdd86e
## 拦截预览图片操作
设置 `before-preview` 函数，在用户点击图片进行预览时，会执行 `before-preview` 函数，接收 { index: 当前预览的下标, imgList: 所有图片地址列表, resolve }，通过 `resolve` 函数告知组件是否确定通过，`resolve` 接受 1 个 boolean 值，`resolve(true)` 表示选项通过，`resolve(false)` 表示选项不通过，不通过时不会执行预览图片操作。
设置 `before-preview` 函数，在用户点击图片进行预览时，会执行 `before-preview` 函数，接收 { file: 预览文件, index: 当前预览的下标, imgList: 所有图片地址列表, resolve }，通过 `resolve` 函数告知组件是否确定通过，`resolve` 接受 1 个 boolean 值，`resolve(true)` 表示选项通过，`resolve(false)` 表示选项不通过，不通过时不会执行预览图片操作。
```html
<wd-upload
@ -588,7 +588,7 @@ const customUpload: UploadMethod = (file, formData, options) => {
| before-upload | 上传文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止上传。 | function({ files, fileList, resolve }) | - | - | - |
| before-choose | 选择图片之前的钩子，参数为文件列表，若返回 false 或者返回 Promise 且被 reject，则停止上传。 | function({ fileList, resolve }) | - | - | - |
| before-remove | 删除文件之前的钩子，参数为要删除的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止上传。 | function({ file, fileList, resolve }) | - | - | - |
| before-preview | 图片预览前的钩子，参数为预览的图片下标和图片列表，若返回 false 或者返回 Promise 且被 reject，则停止上传。 | function({ index, imgList, resolve }) | - | - | - |
| before-preview | 图片预览前的钩子，参数为预览的图片下标和图片列表，若返回 false 或者返回 Promise 且被 reject，则停止上传。 | function({file, index, imgList, resolve }) | - | - | - |
| build-form-data | 构建上传`formData`的钩子，参数为上传的文件、待处理的`formData`，返回值为处理后的`formData`，若返回 false 或者返回 Promise 且被 reject，则停止上传。 | function({ file, formData, resolve }) | - | - | 0.1.61 |
| loading-type | [加载中图标类型](/component/loading) | string | - | circular-ring | - |
| loading-color | [加载中图标颜色](/component/loading) | string | - | #ffffff | - |

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

@ -126,7 +126,7 @@ const beforeChoose = ({ file, resolve }: any) => {
})
}
const beforePreview = ({ resolve }: any) => {
const beforePreview = ({ resolve, file }: any) => {
messageBox
.confirm({
msg: '是否预览图片',

2
src/uni_modules/wot-design-uni/components/wd-loadmore/wd-loadmore.vue
View File

@ -2,7 +2,7 @@
<view :class="['wd-loadmore', customClass]" :style="customStyle" @click="reload">
<wd-divider v-if="state === 'finished'">{{ finishedText || translate('finished') }}</wd-divider>
<block v-if="state === 'error'">
<text class="wd-loadmore__text">{{ errorText || translate('error') }} </text>
<text class="wd-loadmore__text">{{ errorText || translate('error') }}</text>
<text class="wd-loadmore__text is-light">{{ translate('retry') }}</text>
<wd-icon name="refresh" custom-class="wd-loadmore__refresh" />
</block>

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

@ -64,6 +64,7 @@ export type UploadCameraType = 'front' | 'back'
export type UploadStatusType = 'pending' | 'loading' | 'success' | 'fail'
export type UploadBeforePreviewOption = {
file: UploadFileItem
index: number
imgList: string[]
resolve: (isPass: boolean) => void

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

@ -564,6 +564,7 @@ function handlePreviewFile(file: UploadFileItem) {
function handlePreviewImage(index: number, lists: string[]) {
const { onPreviewFail } = props
uni.previewImage({
file,
urls: lists,
current: lists[index],
fail() {
@ -620,6 +621,7 @@ function onPreviewImage(file: UploadFileItem) {
const index: number = lists.findIndex((item) => item.url === file.url)
if (beforePreview) {
beforePreview({
file,
index,
imgList: lists.map((file) => file.url),
resolve: (isPass: boolean) => {
@ -644,6 +646,7 @@ function onPreviewVideo(file: UploadFileItem) {
const index: number = lists.findIndex((item) => item.url === file.url)
if (beforePreview) {
beforePreview({
file,
index,
imgList: [],
resolve: (isPass: boolean) => {
@ -663,6 +666,7 @@ function onPreviewFile(file: UploadFileItem) {
const index: number = lists.findIndex((item) => item.url === file.url)
if (beforePreview) {
beforePreview({
file,
index,
imgList: [],
resolve: (isPass: boolean) => {