[new feature] Uploader: support maxSize prop (#575)

docs/demos/views/uploader.vue

@@ -2,7 +2,7 @@
   <demo-section>
     <demo-block :title="$t('basicUsage')">
       <div class="demo-uploader-container">
-        <van-uploader :after-read="logContent">
+        <van-uploader :max-size="102400" @oversize="logContent('oversize')">
           <van-icon name="photograph" />
         </van-uploader>
       </div>
@@ -10,7 +10,7 @@
 
     <demo-block :title="$t('title2')">
       <div class="demo-uploader-container">
-        <van-uploader :after-read="logContent" accept="image/gif, image/jpeg" multiple>
+        <van-uploader accept="image/gif, image/jpeg" multiple :max-size="36000" @oversize="logContent">
           <van-icon name="photograph" />
         </van-uploader>
       </div>

docs/markdown/en-US/uploader.md

@@ -42,13 +42,26 @@ You can set native properties such as `accpet`、`multiple` on Uploader, and the
 
 | Attribute | Description | Type | Default | Accepted Values |
 |-----------|-----------|-----------|-------------|-------------|
-| result-type | The way to read the file, read as base64; read as text | `String` | `dataUrl` | `text` |
+| result-type | Type of file read result | `String` | `dataUrl` | `text` |
-| disable | Whether to disable the upload, set to true during the image upload to prevent users from clicking this component to upload pictures | `Boolean` | `false` | - |
+| disable | Whether to disable the upload | `Boolean` | `false` | - |
-| before-read | Hook before reading the file, the first parameter is the selected file, return false to stop reading the file | `Function` | - | - |
+| before-read | Hook before reading the file, return false to stop reading the file | `Function` | - | - |
-| after-read | Hook after reading the file, parameter format: { file ,content } | `Function` | - | - |
+| after-read | Hook after reading the file | `Function` | - | - |
+| max-size | Max size of file | `Number` | - | - |
+
+### Event
+
+| Event | Description | Arguments |
+|-----------|-----------|-----------|
+| oversize | Triggered when file size over limit | Same as after-read |
 
 ### Slot
 
-| name | Description |
+| Name | Description |
 |-----------|-----------|
 | - | Custom icon |
+
+### afterRead parematers
+| Key | Description | Type |
+|-----------|-----------|-----------|
+| file | file object | `Object` |
+| content | file content | `String` |

docs/markdown/zh-CN/uploader.md

@@ -40,13 +40,26 @@ export default {
 
 | 参数 | 说明 | 类型 | 默认值 | 可选值 |
 |-----------|-----------|-----------|-------------|-------------|
-| result-type | 读取文件的方式，以base64的方式读取；以文本的方式读取 | `String` | `dataUrl` | `text` |
+| result-type | 文件读取结果类型 | `String` | `dataUrl` | `text` |
-| disable | 是否禁用上传,在图片上传期间设置为true，禁止用户点击此组件上传图片 | `Boolean` | `false` | - |
+| disable | 是否禁用图片上传 | `Boolean` | `false` | - |
-| before-read | 读文件之前的钩子，参数为选择的文件，若返回 false 则停止读取文件 | `Function` | - | - |
+| before-read | 读取前的回调函数，返回 false 可终止文件读取 | `Function` | - | - |
-| after-read | 文件读完之后回调此函数，参数为 { file:'选择的文件',content:'读的内容' } | `Function` | - | - |
+| after-read | 读取完成后的回调函数 | `Function` | - | - |
+| max-size | 文件大小限制，单位为 byte | `Number` | - | - |
+
+### Event
+
+| 事件名 | 说明 | 参数 |
+|-----------|-----------|-----------|
+| oversize | 文件大小超过限制时触发 | 同 after-read |
 
 ### Slot
 
 | 名称 | 说明 |
 |-----------|-----------|
-| - | 自定义上传显示图标 |
+| - | 自定义 uploader 内容 |
+
+### afterRead 回调参数
+| key | 说明 | 类型 |
+|-----------|-----------|-----------|
+| file | 文件解析后的 file 对象 | `Object` |
+| content | 文件内容 | `String` |

packages/uploader/index.vue

@@ -27,6 +27,10 @@ export default create({
     resultType: {
       type: String,
       default: 'dataUrl'
+    },
+    maxSize: {
+      type: Number,
+      default: Number.MAX_VALUE
     }
   },
 
@@ -44,16 +48,26 @@ export default create({
 
       if (Array.isArray(files)) {
         Promise.all(files.map(this.readFile)).then(contents => {
-          this.onAfterRead(
+          let oversize = false;
-            files.map((file, index) => ({
+          const payload = files.map((file, index) => {
+            if (file.size > this.maxSize) {
+              oversize = true;
+            }
+
+            return {
               file: files[index],
               content: contents[index]
-            }))
+            };
-          );
+          });
+
+          this.onAfterRead(payload, oversize);
         });
       } else {
         this.readFile(files).then(content => {
-          this.onAfterRead({ file: files, content });
+          this.onAfterRead(
+            { file: files, content },
+            files.size > this.maxSize
+          );
         });
       }
     },
@@ -74,9 +88,13 @@ export default create({
       });
     },
 
-    onAfterRead(file) {
+    onAfterRead(files, oversize) {
-      this.afterRead && this.afterRead(file);
+      if (oversize) {
-      this.$refs.input && (this.$refs.input.value = '');
+        this.$emit('oversize', files);
+      } else {
+        this.afterRead && this.afterRead(files);
+        this.$refs.input && (this.$refs.input.value = '');
+      }
     }
   }
 });

test/unit/specs/uploader.spec.js

@@ -3,6 +3,7 @@ import { mount } from 'avoriaz';
 
 window.File = function() {
   this.name = 'test';
+  this.size = 10000;
 };
 
 window.FileReader = function() {
@@ -101,4 +102,36 @@ describe('Uploader', () => {
 
     wrapper.vm.onChange({ target: { files: [mockFile, mockFile] }});
   });
+
+  it('size overlimit', done => {
+    const spy = sinon.spy();
+    wrapper = mount(Uploader, {
+      propsData: {
+        maxSize: 1
+      }
+    });
+    wrapper.vm.$on('oversize', spy);
+    wrapper.vm.onChange({ target: { files: [mockFile] }});
+
+    setTimeout(() => {
+      expect(spy.calledOnce).to.be.true;
+      done();
+    }, 50);
+  });
+
+  it('multi file size overlimit', done => {
+    const spy = sinon.spy();
+    wrapper = mount(Uploader, {
+      propsData: {
+        maxSize: 1
+      }
+    });
+    wrapper.vm.$on('oversize', spy);
+    wrapper.vm.onChange({ target: { files: [mockFile, mockFile] }});
+
+    setTimeout(() => {
+      expect(spy.calledOnce).to.be.true;
+      done();
+    }, 50);
+  });
 });