[new feature] Uploader: before-read support promise mode (#3572)

packages/uploader/demo/index.vue

@@ -29,6 +29,13 @@
         </van-button>
       </van-uploader>
     </demo-block>
+
+    <demo-block :title="$t('beforeRead')">
+      <van-uploader
+        v-model="fileList3"
+        :before-read="beforeRead"
+      />
+    </demo-block>
   </demo-section>
 </template>
 
@@ -39,24 +46,38 @@ export default {
       upload: '上传图片',
       preview: '图片预览',
       maxCount: '限制上传数量',
-      uploadStyle: '自定义上传样式'
+      beforeRead: '上传前校验',
+      uploadStyle: '自定义上传样式',
+      invalidType: '请上传 jpg 格式图片'
     },
     'en-US': {
       upload: 'Upload Image',
       preview: 'Preview Image',
       maxCount: 'Max Count',
-      uploadStyle: 'Upload Style'
+      beforeRead: 'Before Read',
+      uploadStyle: 'Upload Style',
+      invalidType: 'Please upload an image in jpg format'
     }
   },
 
   data() {
     return {
       fileList: [],
-      fileList2: []
+      fileList2: [],
+      fileList3: []
     };
   },
 
   methods: {
+    beforeRead(file) {
+      if (file.type !== 'image/jpeg') {
+        this.$toast(this.$t('invalidType'));
+        return false;
+      }
+
+      return true;
+    },
+
     afterRead(file) {
       console.log(file);
     }

packages/uploader/en-US.md

@@ -70,6 +70,38 @@ export default {
 </van-uploader>
 ```
 
+### Before Read
+
+```html
+<van-uploader :before-read="beforeRead" />
+```
+
+```js
+export default {
+  methods: {
+    beforeRead(file) {
+      if (file.type !== 'image/jpeg') {
+        Toast('Please upload an image in jpg format');
+        return false;
+      }
+    
+      return true;
+    },
+
+    asyncBeforeRead(file) {
+      return new Promise((resolve, reject) => {
+        if (file.type !== 'image/jpeg') {
+          Toast('Please upload an image in jpg format');
+          reject();
+        } else {
+          resolve();
+        }
+      });
+    }
+  }
+}
+```
+
 ## API
 
 ### Props
@@ -83,7 +115,7 @@ 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 | `Function` | - |
+| 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` | - |
 | max-size | Max size of file | `Number` | - |
 | max-count | Max count of image | `Number` | - |

packages/uploader/index.js

@@ -59,11 +59,29 @@ export default sfc({
 
       files = files.length === 1 ? files[0] : [].slice.call(files);
 
-      if (this.beforeRead && !this.beforeRead(files, this.detail)) {
+      if (this.beforeRead) {
-        this.resetInput();
+        const response = this.beforeRead(files, this.detail);
-        return;
+
+        if (!response) {
+          this.resetInput();
+          return;
+        }
+
+        if (response.then) {
+          response
+            .then(() => {
+              this.readFile(files);
+            })
+            .catch(this.resetInput);
+
+          return;
+        }
       }
 
+      this.readFile(files);
+    },
+
+    readFile(files) {
       const oversize = isOversize(files, this.maxSize);
 
       if (Array.isArray(files)) {

packages/uploader/test/__snapshots__/demo.spec.js.snap

@@ -36,5 +36,13 @@ exports[`renders demo correctly 1`] = `
       </div>
     </div>
   </div>
+  <div>
+    <div class="van-uploader">
+      <div class="van-uploader__wrapper">
+        <div class="van-uploader__upload"><i class="van-icon van-icon-plus van-uploader__upload-icon">
+            <!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
+      </div>
+    </div>
+  </div>
 </div>
 `;

packages/uploader/test/index.spec.js

@@ -94,6 +94,42 @@ it('before read return false', () => {
   expect(input.element.value).toEqual('');
 });
 
+it('before read return promise and resolve', async () => {
+  const afterRead = jest.fn();
+  const wrapper = mount(Uploader, {
+    propsData: {
+      beforeRead: () => new Promise(resolve => {
+        resolve();
+      }),
+      afterRead
+    }
+  });
+
+  wrapper.vm.onChange(file);
+
+  await later();
+  expect(afterRead).toHaveBeenCalledTimes(1);
+});
+
+it('before read return promise and reject', async () => {
+  const afterRead = jest.fn();
+  const wrapper = mount(Uploader, {
+    propsData: {
+      beforeRead: () => new Promise((resolve, reject) => {
+        reject();
+      }),
+      afterRead
+    }
+  });
+
+  const input = wrapper.find('input');
+
+  await later();
+  wrapper.vm.onChange(file);
+  expect(afterRead).toHaveBeenCalledTimes(0);
+  expect(input.element.value).toEqual('');
+});
+
 test('file size overlimit', async () => {
   const wrapper = mount(Uploader, {
     propsData: {

packages/uploader/zh-CN.md

@@ -79,6 +79,42 @@ export default {
 </van-uploader>
 ```
 
+### 上传前校验
+
+通过传入`beforeRead`函数可以在上传前进行校验，返回`true`表示校验通过，返回`false`表示校验失败。支持返回`Promise`进行异步校验
+
+```html
+<van-uploader :before-read="beforeRead" />
+```
+
+```js
+export default {
+  methods: {
+    // 返回布尔值
+    beforeRead(file) {
+      if (file.type !== 'image/jpeg') {
+        Toast('请上传 jpg 格式图片');
+        return false;
+      }
+    
+      return true;
+    },
+
+    // 返回 Promise
+    asyncBeforeRead(file) {
+      return new Promise((resolve, reject) => {
+        if (file.type !== 'image/jpeg') {
+          Toast('请上传 jpg 格式图片');
+          reject();
+        } else {
+          resolve();
+        }
+      });
+    }
+  }
+}
+```
+
 ## API
 
 ### Props
@@ -92,7 +128,7 @@ export default {
 | multiple | 是否开启图片多选，部分安卓机型不支持 | `Boolean` | `false` | 2.0.0 |
 | disabled | 是否禁用图片上传 | `Boolean` | `false` | - |
 | capture | 图片选取模式，可选值为`camera`(直接调起摄像头) | `String` | - | 2.0.0 |
-| before-read | 文件读取前的回调函数，返回`false`可终止文件读取 | `Function` | - | - |
+| before-read | 文件读取前的回调函数，返回`false`可终止文件读取，支持返回`Promise` | `Function` | - | - |
 | after-read | 文件读取完成后的回调函数 | `Function` | - | - |
 | max-size | 文件大小限制，单位为`byte` | `Number` | - | - |
 | max-count | 图片上传数量限制 | `Number` | - | 2.0.0 |