diff --git a/src/uploader/README.md b/src/uploader/README.md index feb98e6af..d937cca12 100644 --- a/src/uploader/README.md +++ b/src/uploader/README.md @@ -118,8 +118,9 @@ export default { | multiple | Whether to enable multiple selection pictures | `boolean` | `false` | | disabled | Whether to disabled the upload | `boolean` | `false` | | capture | Capture，can be set to `camera` | `string` | - | -| before-read | Hook before reading the file, return false to stop reading the file, can return Promise | `Function` | - | | after-read | Hook after reading the file | `Function` | - | +| before-read | Hook before reading the file, return false to stop reading the file, can return Promise | `Function` | - | +| before-delete | Hook before delete the file, return false to stop reading the file, can return Promise | `Function` | - | | max-size | Max size of file | `number` | - | | max-count | Max count of image | `number` | - | | result-type | Type of file read result, can be set to `dataUrl` `text` | `string` | `dataUrl` | diff --git a/src/uploader/README.zh-CN.md b/src/uploader/README.zh-CN.md index 122381727..959fdba01 100644 --- a/src/uploader/README.zh-CN.md +++ b/src/uploader/README.zh-CN.md @@ -134,8 +134,9 @@ export default { | multiple | 是否开启图片多选，部分安卓机型不支持 | `boolean` | `false` | 2.0.0 | | disabled | 是否禁用文件上传 | `boolean` | `false` | - | | capture | 图片选取模式，可选值为`camera`(直接调起摄像头) | `string` | - | 2.0.0 | -| before-read | 文件读取前的回调函数，返回`false`可终止文件读取，支持返回`Promise` | `Function` | - | - | | after-read | 文件读取完成后的回调函数 | `Function` | - | - | +| before-read | 文件读取前的回调函数，返回`false`可终止文件读取，支持返回`Promise` | `Function` | - | - | +| before-delete | 文件删除前的回调函数，返回`false`可终止文件读取，支持返回`Promise` | `Function` | - | - | | max-size | 文件大小限制，单位为`byte` | `number` | - | - | | max-count | 文件上传数量限制 | `number` | - | 2.0.0 | | result-type | 文件读取结果类型，可选值为`text` | `string` | `dataUrl` | - | @@ -154,7 +155,9 @@ export default { |------|------| | default | 自定义上传区域 | -### before-read、after-read 回调参数 +### 回调参数 + +before-read、after-read、before-delete 执行时会传递以下回调参数： | 参数名 | 说明 | 类型 | |------|------|------| diff --git a/src/uploader/index.js b/src/uploader/index.js index c7f19ca1d..85025f81f 100644 --- a/src/uploader/index.js +++ b/src/uploader/index.js @@ -1,4 +1,4 @@ -import { createNamespace, addUnit } from '../utils'; +import { createNamespace, addUnit, noop } from '../utils'; import { toArray, readFile, isOversize, isImageFile } from './utils'; import Icon from '../icon'; import Image from '../image'; @@ -18,6 +18,7 @@ export default createComponent({ uploadText: String, afterRead: Function, beforeRead: Function, + beforeDelete: Function, previewSize: [Number, String], name: { type: [Number, String], @@ -133,6 +134,27 @@ export default createComponent({ }, onDelete(file, index) { + if (this.beforeDelete) { + const response = this.beforeDelete(file, this.detail); + + if (!response) { + return; + } + + if (response.then) { + response + .then(() => { + this.deleteFile(file, index); + }) + .catch(noop); + return; + } + } + + this.deleteFile(file, index); + }, + + deleteFile(file, index) { const fileList = this.fileList.slice(0); fileList.splice(index, 1); diff --git a/src/uploader/test/index.spec.js b/src/uploader/test/index.spec.js index 1ed3935db..94cdb36f5 100644 --- a/src/uploader/test/index.spec.js +++ b/src/uploader/test/index.spec.js @@ -9,6 +9,8 @@ const mockFileDataUrl = 'data:image/test'; const mockFile = new File([], 'test.jpg'); const file = { target: { files: [mockFile] } }; const multiFile = { target: { files: [mockFile, mockFile] } }; +const IMAGE = 'https://img.yzcdn.cn/vant/cat.jpeg'; +const PDF = 'https://img.yzcdn.cn/vant/test.pdf'; window.FileReader = function () { this.readAsText = function () { @@ -240,10 +242,10 @@ it('preview-size prop', async () => { expect(wrapper).toMatchSnapshot(); }); -it('delete preview image', async () => { +it('delete preview image', () => { const wrapper = mount(Uploader, { propsData: { - fileList: [], + fileList: [{ url: IMAGE }], previewSize: 30 }, listeners: { @@ -253,9 +255,6 @@ it('delete preview image', async () => { } }); - wrapper.vm.onChange(file); - await later(); - wrapper.find('.van-uploader__preview-delete').trigger('click'); expect(wrapper.vm.fileList.length).toEqual(0); @@ -263,12 +262,62 @@ it('delete preview image', async () => { expect(wrapper.emitted('delete')[0]).toBeTruthy(); }); +it('before-delete prop return false', () => { + const wrapper = mount(Uploader, { + propsData: { + fileList: [{ url: IMAGE }], + beforeDelete: () => false + } + }); + + wrapper.find('.van-uploader__preview-delete').trigger('click'); + expect(wrapper.emitted('delete')).toBeFalsy(); +}); + +it('before-delete prop return true', () => { + const wrapper = mount(Uploader, { + propsData: { + fileList: [{ url: IMAGE }], + beforeDelete: () => true + } + }); + + wrapper.find('.van-uploader__preview-delete').trigger('click'); + expect(wrapper.emitted('delete')).toBeTruthy(); +}); + +it('before-delete prop resolved', async () => { + const wrapper = mount(Uploader, { + propsData: { + fileList: [{ url: IMAGE }], + beforeDelete: () => new Promise(resolve => resolve()) + } + }); + + wrapper.find('.van-uploader__preview-delete').trigger('click'); + await later(); + expect(wrapper.emitted('delete')).toBeTruthy(); +}); + +it('before-delete prop rejected', async () => { + const wrapper = mount(Uploader, { + propsData: { + fileList: [{ url: IMAGE }], + beforeDelete: () => new Promise((resolve, reject) => reject()) + } + }); + + wrapper.find('.van-uploader__preview-delete').trigger('click'); + await later(); + expect(wrapper.emitted('delete')).toBeFalsy(); +}); + it('click to preview image', async () => { const wrapper = mount(Uploader, { propsData: { fileList: [ - { url: 'https://img.yzcdn.cn/vant/cat.jpeg' }, - { url: 'https://img.yzcdn.cn/vant/test.pdf' } + { url: IMAGE }, + { url: PDF } ], previewSize: 30 },