[new feature] Uploader: add before-delete prop (#4118)

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

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 执行时会传递以下回调参数：
 
 | 参数名 | 说明 | 类型 |
 |------|------|------|

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);
 

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: IMAGE },
-        { url: 'https://img.yzcdn.cn/vant/test.pdf' }
+        { url: PDF }
       ],
       previewSize: 30
     },