diff --git a/docs/demos/views/uploader.vue b/docs/demos/views/uploader.vue index f632001f7..7cb9b6deb 100644 --- a/docs/demos/views/uploader.vue +++ b/docs/demos/views/uploader.vue @@ -2,7 +2,7 @@
- +
@@ -10,7 +10,7 @@
- +
diff --git a/docs/markdown/en-US/uploader.md b/docs/markdown/en-US/uploader.md index 49d7c26e2..ae07f0115 100644 --- a/docs/markdown/en-US/uploader.md +++ b/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` | -| 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` | - | -| before-read | Hook before reading the file, the first parameter is the selected file, return false to stop reading the file | `Function` | - | - | -| after-read | Hook after reading the file, parameter format: { file ,content } | `Function` | - | - | +| result-type | Type of file read result | `String` | `dataUrl` | `text` | +| disable | Whether to disable the upload | `Boolean` | `false` | - | +| 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` | - | - | + +### 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` | \ No newline at end of file diff --git a/docs/markdown/zh-CN/uploader.md b/docs/markdown/zh-CN/uploader.md index 937db1670..b9247e0c5 100644 --- a/docs/markdown/zh-CN/uploader.md +++ b/docs/markdown/zh-CN/uploader.md @@ -40,13 +40,26 @@ export default { | 参数 | 说明 | 类型 | 默认值 | 可选值 | |-----------|-----------|-----------|-------------|-------------| -| result-type | 读取文件的方式，以base64的方式读取；以文本的方式读取 | `String` | `dataUrl` | `text` | -| disable | 是否禁用上传,在图片上传期间设置为true，禁止用户点击此组件上传图片 | `Boolean` | `false` | - | -| before-read | 读文件之前的钩子，参数为选择的文件，若返回 false 则停止读取文件 | `Function` | - | - | -| after-read | 文件读完之后回调此函数，参数为 { file:'选择的文件',content:'读的内容' } | `Function` | - | - | +| result-type | 文件读取结果类型 | `String` | `dataUrl` | `text` | +| disable | 是否禁用图片上传 | `Boolean` | `false` | - | +| before-read | 读取前的回调函数，返回 false 可终止文件读取 | `Function` | - | - | +| after-read | 读取完成后的回调函数 | `Function` | - | - | +| max-size | 文件大小限制，单位为 byte | `Number` | - | - | + +### Event + +| 事件名 | 说明 | 参数 | +|-----------|-----------|-----------| +| oversize | 文件大小超过限制时触发 | 同 after-read | ### Slot | 名称 | 说明 | |-----------|-----------| -| - | 自定义上传显示图标 | +| - | 自定义 uploader 内容 | + +### afterRead 回调参数 +| key | 说明 | 类型 | +|-----------|-----------|-----------| +| file | 文件解析后的 file 对象 | `Object` | +| content | 文件内容 | `String` | \ No newline at end of file diff --git a/packages/uploader/index.vue b/packages/uploader/index.vue index a5def7183..78530c31d 100644 --- a/packages/uploader/index.vue +++ b/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( - files.map((file, index) => ({ + let oversize = false; + 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) { - this.afterRead && this.afterRead(file); - this.$refs.input && (this.$refs.input.value = ''); + onAfterRead(files, oversize) { + if (oversize) { + this.$emit('oversize', files); + } else { + this.afterRead && this.afterRead(files); + this.$refs.input && (this.$refs.input.value = ''); + } } } }); diff --git a/test/unit/specs/uploader.spec.js b/test/unit/specs/uploader.spec.js index ea1be0a7f..6d3648a49 100644 --- a/test/unit/specs/uploader.spec.js +++ b/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); + }); });