Skip to content

Commit

Permalink
feat:✨ Upload组件beforePreview新增file参数 (#598)
Browse files Browse the repository at this point in the history
  • Loading branch information
@chenzeqin
chenzeqin authored Sep 18, 2024
1 parent cae2e56 commit 6027b39
Show file tree
Hide file tree
Showing 5 changed files with 9 additions and 4 deletions.
4 changes: 2 additions & 2 deletions docs/component/upload.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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 | - |
Expand Down
2 changes: 1 addition & 1 deletion src/pages/upload/Index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ const beforeChoose = ({ file, resolve }: any) => {
})
}
const beforePreview = ({ resolve }: any) => {
const beforePreview = ({ resolve, file }: any) => {
messageBox
.confirm({
msg: '是否预览图片',
Expand Down
2 changes: 1 addition & 1 deletion src/uni_modules/wot-design-uni/components/wd-loadmore/wd-loadmore.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
1 change: 1 addition & 0 deletions src/uni_modules/wot-design-uni/components/wd-upload/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 4 additions & 0 deletions src/uni_modules/wot-design-uni/components/wd-upload/wd-upload.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down Expand Up @@ -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) => {
Expand All @@ -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) => {
Expand All @@ -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) => {
Expand Down

0 comments on commit 6027b39

Please sign in to comment.