From 104417935497f37e303aad922a7ef6bb674712c1 Mon Sep 17 00:00:00 2001 From: neverland Date: Thu, 10 Oct 2019 20:09:22 +0800 Subject: [PATCH] feat(Uploader): add file result-type (#4680) --- src/uploader/README.md | 10 +++++++++- src/uploader/README.zh-CN.md | 12 +++++++++++- src/uploader/index.js | 21 ++++++++++++++++----- src/uploader/test/index.spec.js | 17 ++++++++++++++++- src/uploader/utils.ts | 9 ++++++++- 5 files changed, 60 insertions(+), 9 deletions(-) diff --git a/src/uploader/README.md b/src/uploader/README.md index e3fe17387..17b6633cf 100644 --- a/src/uploader/README.md +++ b/src/uploader/README.md @@ -124,7 +124,7 @@ export default { | before-delete | Hook before delete the file, return false to stop reading the file, can return Promise | *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` | - | +| result-type | Type of file read result, can be set to `file` `text` | *string* | `dataUrl` | 2.2.7 | | upload-text | Upload text | *string* | - | - | | image-fit | Preview image fit mode | *string* | `cover` | 2.1.5 | @@ -149,3 +149,11 @@ export default { |------|------|------| | file | File object | *object* | | detail | Detail info, contains name and index | *object* | + +### ResultType + +| Value | Description | +|------|------| +| file | Result contains File object | +| text | Result contains File object and text content | +| dataUrl | Result contains File object and base64 content | diff --git a/src/uploader/README.zh-CN.md b/src/uploader/README.zh-CN.md index 287cf2c67..94ec54850 100644 --- a/src/uploader/README.zh-CN.md +++ b/src/uploader/README.zh-CN.md @@ -140,7 +140,7 @@ export default { | before-delete | 文件删除前的回调函数,返回`false`可终止文件读取,支持返回`Promise` | *Function* | - | - | | max-size | 文件大小限制,单位为`byte` | *number* | - | - | | max-count | 文件上传数量限制 | *number* | - | - | -| result-type | 文件读取结果类型,可选值为`text` | *string* | `dataUrl` | - | +| result-type | 文件读取结果类型,可选值为`file` `text` | *string* | `dataUrl` | 2.2.7 | | upload-text | 上传区域文字提示 | *string* | - | - | | image-fit | 预览图裁剪模式,可选值见 [Image](#/zh-CN/image) 组件 | *string* | `cover` | 2.1.5 | @@ -167,3 +167,13 @@ before-read、after-read、before-delete 执行时会传递以下回调参数: |------|------|------| | file | 文件解析后的 file 对象 | *object* | | detail | 额外信息,包含 name 和 index 字段 | *object* | + +### ResultType 可选值 + +`result-type`字段表示文件读取结果的类型,上传大文件时,建议使用 file 类型,避免卡顿。 + +| 值 | 描述 | +|------|------| +| file | 结果仅包含 File 对象 | +| text | 结果包含 File 对象,以及文件的文本内容 | +| dataUrl | 结果包含 File 对象,以及文件对应的 base64 编码 | diff --git a/src/uploader/index.js b/src/uploader/index.js index 136d11efb..4e530bb7b 100644 --- a/src/uploader/index.js +++ b/src/uploader/index.js @@ -114,16 +114,27 @@ export default createComponent({ } Promise.all(files.map(file => readFile(file, this.resultType))).then(contents => { - const fileList = files.map((file, index) => ({ - file, - content: contents[index] - })); + const fileList = files.map((file, index) => { + const result = { file }; + + if (contents[index]) { + result.content = contents[index]; + } + + return result; + }); this.onAfterRead(fileList, oversize); }); } else { readFile(files, this.resultType).then(content => { - this.onAfterRead({ file: files, content }, oversize); + const result = { file: files }; + + if (content) { + result.content = content; + } + + this.onAfterRead(result, oversize); }); } }, diff --git a/src/uploader/test/index.spec.js b/src/uploader/test/index.spec.js index 875e263cd..5965b22ae 100644 --- a/src/uploader/test/index.spec.js +++ b/src/uploader/test/index.spec.js @@ -37,7 +37,7 @@ test('disabled', () => { expect(afterRead).toHaveBeenCalledTimes(0); }); -it('read text', done => { +it('result-type as text', done => { const wrapper = mount(Uploader, { propsData: { resultType: 'text', @@ -51,6 +51,21 @@ it('read text', done => { wrapper.vm.onChange(file); }); +it('result-type as file', done => { + const wrapper = mount(Uploader, { + propsData: { + resultType: 'file', + afterRead: readFile => { + expect(readFile.file).toBeTruthy(); + expect(readFile.content).toBeFalsy(); + done(); + } + } + }); + + wrapper.vm.onChange(file); +}); + it('set input name', done => { const wrapper = mount(Uploader, { propsData: { diff --git a/src/uploader/utils.ts b/src/uploader/utils.ts index d9cc007c3..2ce4778eb 100644 --- a/src/uploader/utils.ts +++ b/src/uploader/utils.ts @@ -1,3 +1,5 @@ +export type ResultType = 'dataUrl' | 'text' | 'file'; + export function toArray(item: T | T[]): T[] { if (Array.isArray(item)) { return item; @@ -6,8 +8,13 @@ export function toArray(item: T | T[]): T[] { return [item]; } -export function readFile(file: File, resultType: string) { +export function readFile(file: File, resultType: ResultType) { return new Promise(resolve => { + if (resultType === 'file') { + resolve(); + return; + } + const reader = new FileReader(); reader.onload = event => {