fix(uploader): automatically filter files exceeding the max-size (#6150)

src/uploader/README.md

@@ -103,6 +103,27 @@ export default {
 };
 ```
 
+### Max Size
+
+```html
+<van-uploader
+  multiple
+  :max-count="5"
+  :max-size="3 * 1024 * 1024"
+  @oversize="onOversize"
+/>
+```
+
+```js
+export default {
+  methods: {
+    onOversize(file) {
+      console.log(file);
+    },
+  },
+};
+```
+
 ### Upload Style
 
 ```html

src/uploader/README.zh-CN.md

@@ -119,6 +119,29 @@ export default {
 };
 ```
 
+### 限制上传大小
+
+通过`max-size`属性可以限制上传文件的大小，超过大小的文件会被自动过滤，这些文件信息可以通过`oversize`事件获取
+
+```html
+<van-uploader
+  multiple
+  :max-count="5"
+  :max-size="3 * 1024 * 1024"
+  @oversize="onOversize"
+/>
+```
+
+```js
+export default {
+  methods: {
+    onOversize(file) {
+      console.log(file);
+    },
+  },
+};
+```
+
 ### 自定义上传样式
 
 通过插槽可以自定义上传区域的样式

src/uploader/demo/index.vue

@@ -20,6 +20,16 @@
       <van-uploader v-model="fileList2" multiple :max-count="2" />
     </demo-block>
 
+    <demo-block :title="t('maxSize')">
+      <van-uploader
+        v-model="fileList4"
+        multiple
+        :max-count="5"
+        :max-size="3 * 1024 * 1024"
+        @oversize="onOversize"
+      />
+    </demo-block>
+
     <demo-block :title="t('uploadStyle')">
       <van-uploader>
         <van-button type="primary" icon="photo">
@@ -48,6 +58,7 @@ export default {
       beforeRead: '上传前校验',
       uploadStyle: '自定义上传样式',
       invalidType: '请上传 jpg 格式图片',
+      maxSize: '限制上传大小(3M)',
     },
     'en-US': {
       status: 'Upload Status',
@@ -60,6 +71,7 @@ export default {
       beforeRead: 'Before Read',
       uploadStyle: 'Upload Style',
       invalidType: 'Please upload an image in jpg format',
+      maxSize: 'Max Size(3M)',
     },
   },
 
@@ -71,6 +83,7 @@ export default {
       ],
       fileList2: [{ url: 'https://img.yzcdn.cn/vant/sand.jpg' }],
       fileList3: [],
+      fileList4: [],
       statusFileList: [],
     };
   },
@@ -113,6 +126,10 @@ export default {
         item.message = this.t('failed');
       }, 1000);
     },
+
+    onOversize(file, detail) {
+      console.log(file, detail);
+    },
   },
 };
 </script>

src/uploader/index.js

@@ -175,15 +175,38 @@ export default createComponent({
     onAfterRead(files, oversize) {
       this.resetInput();
 
+      let validFiles = files;
+
       if (oversize) {
-        this.$emit('oversize', files, this.getDetail());
-        return;
+        let oversizeFiles = files;
+        if (Array.isArray(files)) {
+          oversizeFiles = [];
+          validFiles = [];
+          files.forEach((item) => {
+            if (item.file) {
+              if (item.file.size > this.maxSize) {
+                oversizeFiles.push(item);
+              } else {
+                validFiles.push(item);
+              }
+            }
+          });
+        } else {
+          validFiles = null;
+        }
+        this.$emit('oversize', oversizeFiles, this.getDetail());
       }
 
-      this.$emit('input', [...this.fileList, ...toArray(files)]);
+      const isValidFiles = Array.isArray(validFiles)
+        ? Boolean(validFiles.length)
+        : Boolean(validFiles);
 
-      if (this.afterRead) {
-        this.afterRead(files, this.getDetail());
+      if (isValidFiles) {
+        this.$emit('input', [...this.fileList, ...toArray(validFiles)]);
+
+        if (this.afterRead) {
+          this.afterRead(validFiles, this.getDetail());
+        }
       }
     },
 

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

@@ -84,6 +84,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-photograph 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">

src/uploader/test/index.spec.js

@@ -487,3 +487,23 @@ test('file message should be reactive', (done) => {
 
   wrapper.vm.onChange(file);
 });
+
+test('multiFile upload filter max-size file', async () => {
+  const SmallFile = function () {
+    this.size = 100;
+  };
+  const multiFiles = {
+    target: { files: [mockFile, new SmallFile([], 'small-test.jpg')] },
+  };
+
+  const wrapper = mount(Uploader, {
+    propsData: {
+      maxSize: 1000,
+    },
+  });
+  wrapper.vm.onChange(multiFiles);
+
+  await later();
+
+  expect(wrapper.emitted('oversize')[0]).toBeTruthy();
+});