feat(Uploader): add file result-type (youzan#4680)

chenjiahan · web-flow · commit 104417935497 · 2019-10-10T20:09:22.000+08:00
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -1,3 +1,5 @@
+export type ResultType = 'dataUrl' | 'text' | 'file';
+
 export function toArray<T>(item: T | T[]): T[] {
   if (Array.isArray(item)) {
     return item;
@@ -6,8 +8,13 @@ export function toArray<T>(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 => {
