[new feature] Uploader: add max-count prop

docs/markdown/changelog.zh-CN.md

@@ -22,6 +22,7 @@
 ##### Uploader
 
 - 新增`preview`属性
+- 新增`max-count`属性
 
 
 ### [v2.0.0-beta.3](https://github.com/youzan/vant/tree/v2.0.0-beta.3)

packages/uploader/demo/index.vue

@@ -4,6 +4,14 @@
       <van-uploader preview />
     </demo-block>
 
+    <demo-block :title="$t('maxCount')">
+      <van-uploader
+        preview
+        multiple
+        :max-count="2"
+      />
+    </demo-block>
+
     <demo-block :title="$t('uploadStyle')">
       <van-uploader>
         <van-button
@@ -23,11 +31,13 @@ export default {
     'zh-CN': {
       name: '标识名称',
       upload: '上传图片',
+      maxCount: '上传数量限制',
       uploadStyle: '自定义上传样式'
     },
     'en-US': {
       name: 'Name',
       upload: 'Upload Image',
+      maxCount: 'Max Count',
       uploadStyle: 'Upload Style'
     }
   },

packages/uploader/en-US.md

@@ -26,6 +26,16 @@ export default {
 };
 ```
 
+### Max Count
+
+```html
+<van-uploader
+  preview
+  multiple
+  :max-count="2"
+/>
+```
+
 ### Upload Style
 
 ```html
@@ -49,6 +59,7 @@ export default {
 | before-read | Hook before reading the file, return false to stop reading the file | `Function` | - |
 | after-read | Hook after reading the file | `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` |
 | upload-text | Upload text | `String` | - |
 

packages/uploader/index.js

@@ -24,6 +24,10 @@ export default sfc({
     maxSize: {
       type: Number,
       default: Number.MAX_VALUE
+    },
+    maxCount: {
+      type: Number,
+      default: Number.MAX_VALUE
     }
   },
 
@@ -44,17 +48,22 @@ export default sfc({
   methods: {
     onChange(event) {
       let { files } = event.target;
+
       if (this.disabled || !files.length) {
         return;
       }
 
       files = files.length === 1 ? files[0] : [].slice.call(files, 0);
+
       if (!files || (this.beforeRead && !this.beforeRead(files, this.detail))) {
         this.resetInput();
         return;
       }
 
       if (Array.isArray(files)) {
+        const maxCount = this.maxCount - this.previewImages.length;
+        files = files.slice(0, maxCount);
+
         Promise.all(files.map(this.readFile)).then(contents => {
           let oversize = false;
           const payload = files.map((file, index) => {
@@ -96,17 +105,19 @@ export default sfc({
     onAfterRead(files, oversize) {
       if (oversize) {
         this.$emit('oversize', files, this.detail);
-      } else {
-        if (Array.isArray(files)) {
-          files.forEach(this.addPreviewImage);
-        } else {
-          this.addPreviewImage(files);
-        }
-
-        if (this.afterRead) {
-          this.afterRead(files, this.detail);
-        }
+        return;
       }
+
+      if (Array.isArray(files)) {
+        files.forEach(this.addPreviewImage);
+      } else {
+        this.addPreviewImage(files);
+      }
+
+      if (this.afterRead) {
+        this.afterRead(files, this.detail);
+      }
+
       this.resetInput();
     },
 
@@ -130,6 +141,10 @@ export default sfc({
     },
 
     renderUpload() {
+      if (this.previewImages.length >= this.maxCount) {
+        return;
+      }
+
       const slot = this.slots();
 
       const Input = (

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

@@ -10,6 +10,14 @@ 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 multiple="multiple" type="file" accept="image/*" class="van-uploader__input"></div>
+      </div>
+    </div>
+  </div>
   <div>
     <div class="van-uploader">
       <div class="van-uploader__wrapper">

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

@@ -1,5 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`max-count prop 1`] = `
+<div class="van-uploader">
+  <div class="van-uploader__wrapper">
+    <div class="van-image van-uploader__preview"><img src="test" class="van-image__img" style="object-fit: cover;">
+      <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
+          <!----></i></div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`render preview image 1`] = `
 <div class="van-uploader">
   <div class="van-uploader__wrapper">

packages/uploader/test/index.spec.js

@@ -136,3 +136,17 @@ it('render preview image', async () => {
 
   expect(wrapper).toMatchSnapshot();
 });
+
+it('max-count prop', async () => {
+  const wrapper = mount(Uploader, {
+    propsData: {
+      preview: true,
+      maxCount: 1
+    }
+  });
+
+  wrapper.vm.onChange(multiFile);
+  await later();
+
+  expect(wrapper).toMatchSnapshot();
+});

packages/uploader/zh-CN.md

@@ -12,6 +12,8 @@ Vue.use(Uploader);
 
 ### 基础用法
 
+图片上传完毕后会触发`after-read`传入的回调函数，获取到对应的`file`对象
+
 ```html
 <van-uploader preview :after-read="onRead" />
 ```
@@ -26,8 +28,22 @@ export default {
 };
 ```
 
+### 上传数量限制
+
+通过`max-count`属性可以限制上传图片的数量。上传数量达到限制后，会自动隐藏上传区域
+
+```html
+<van-uploader
+  preview
+  multiple
+  :max-count="2"
+/>
+```
+
 ### 自定义上传样式
 
+通过插槽可以自定义上传区域的样式
+
 ```html
 <van-uploader :after-read="onRead">
   <van-button icon="photo" type="primary">上传图片</van-button>
@@ -49,6 +65,7 @@ export default {
 | before-read | 文件读取前的回调函数，返回`false`可终止文件读取 | `Function` | - | - |
 | after-read | 文件读取完成后的回调函数 | `Function` | - | - |
 | max-size | 文件大小限制，单位为`byte` | `Number` | - | - |
+| max-count | 图片上传数量限制 | `Number` | - | 2.0.0 |
 | result-type | 文件读取结果类型，可选值为`text` | `String` | `dataUrl` | - |
 | upload-text | 上传区域文字提示 | `String` | - | 2.0.0 |
 
@@ -56,7 +73,7 @@ export default {
 
 | 事件名 | 说明 | 回调参数 |
 |------|------|------|
-| oversize | 文件大小超过限制时触发 | 同 after-read |
+| oversize | 文件大小超过限制时触发 | 同`after-read` |
 
 ### Slots