From 08f28a5c46092891124f93dfefb4957624163e08 Mon Sep 17 00:00:00 2001
From: suzigang <1039168735@qq.com>
Date: Wed, 24 Mar 2021 10:33:01 +0800
Subject: [PATCH] docs: uploader

---
 src/packages/uploader/demo.vue  | 50 +++++++++++++++++++++++++++++++--
 src/packages/uploader/doc.md    | 46 ++++++++++++++++++++----------
 src/packages/uploader/index.vue | 30 ++++++++++----------
 3 files changed, 94 insertions(+), 32 deletions(-)

diff --git a/src/packages/uploader/demo.vue b/src/packages/uploader/demo.vue
index aa3d60280..12edaf258 100644
--- a/src/packages/uploader/demo.vue
+++ b/src/packages/uploader/demo.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="demo bg-w">
     <h2>基础用法</h2>
-    <nut-uploader :url="uploadUrl"></nut-uploader>
+    <nut-uploader :url="uploadUrl" @start="start"></nut-uploader>
     <h2>上传状态</h2>
     <nut-uploader :url="uploadUrl" multiple @delete="onDelete"></nut-uploader>
     <h2>限制上传数量5个</h2>
@@ -13,6 +13,14 @@
       :max-size="1024 * 50"
       @oversize="onOversize"
     ></nut-uploader>
+    <h2>限制上传大小（在beforeupload钩子中处理）</h2>
+    <nut-uploader
+      :url="uploadUrl"
+      multiple
+      :before-upload="beforeUpload"
+      :max-size="1024 * 50"
+      @oversize="onOversize"
+    ></nut-uploader>
     <h2>自定义数据 FormData 、 headers </h2>
     <nut-uploader
       :url="uploadUrl"
@@ -33,18 +41,56 @@ export default createDemo({
   setup() {
     const uploadUrl =
       'https://my-json-server.typicode.com/linrufeng/demo/posts';
-
     const formData = {
       custom: 'test'
     };
+    const fileToDataURL = (file: Blob): Promise<any> => {
+      return new Promise(resolve => {
+        const reader = new FileReader();
+        reader.onloadend = e => resolve((e.target as FileReader).result);
+        reader.readAsDataURL(file);
+      });
+    };
+    const dataURLToImage = (dataURL: string): Promise<HTMLImageElement> => {
+      return new Promise(resolve => {
+        const img = new Image();
+        img.onload = () => resolve(img);
+        img.src = dataURL;
+      });
+    };
+    const canvastoFile = (
+      canvas: HTMLCanvasElement,
+      type: string,
+      quality: number
+    ): Promise<Blob | null> => {
+      return new Promise(resolve =>
+        canvas.toBlob(blob => resolve(blob), type, quality)
+      );
+    };
     const onOversize = (files: File[]) => {
       console.log('oversize 触发 文件大小不能超过 50kb', files);
     };
     const onDelete = (file: FileItem, fileList: FileItem[]) => {
       console.log('delete 事件触发', file, fileList);
     };
+    const beforeUpload = async (file: File[]) => {
+      const canvas = document.createElement('canvas');
+      const context = canvas.getContext('2d') as CanvasRenderingContext2D;
+      const base64 = await fileToDataURL(file[0]);
+      const img = await dataURLToImage(base64);
+      canvas.width = img.width;
+      canvas.height = img.height;
+
+      context.clearRect(0, 0, img.width, img.height);
+      context.drawImage(img, 0, 0, img.width, img.height);
+
+      let blob = (await canvastoFile(canvas, 'image/jpeg', 0.5)) as Blob; //quality:0.5可根据实际情况计算
+      const f = await new File([blob], file[0].name);
+      return [f];
+    };
     return {
       onOversize,
+      beforeUpload,
       onDelete,
       uploadUrl,
       formData
diff --git a/src/packages/uploader/doc.md b/src/packages/uploader/doc.md
index 52c989036..97e1f3962 100644
--- a/src/packages/uploader/doc.md
+++ b/src/packages/uploader/doc.md
@@ -27,10 +27,10 @@ app.use(Uploader);
 ``` html
 <nut-uploader url="http://服务器地址" multiple max-count="5"></nut-uploader>
 ```
-### 限制上传大小（每个文件最大不超过 50kb）
+### 限制上传大小（每个文件最大不超过 50kb，也可以在beforeupload中自行处理）
 
 ``` html
-<nut-uploader url="http://服务器地址" multiple :max-size="1024 * 50" @oversize="onOversize"></nut-uploader>
+<nut-uploader url="http://服务器地址" multiple :max-size="1024 * 50" :before-upload="beforeUpload" @oversize="onOversize"></nut-uploader>
 ```
 
 ``` javascript
@@ -41,6 +41,11 @@ setup() {
     const onOversize = (files: File[]) => {
       console.log('oversize 触发 文件大小不能超过 50kb', files);
     };
+
+    const beforeUpload = (files: File[]) => {
+      //自定义处理
+      return files;
+    }
    
     return {
       onOversize,
@@ -85,36 +90,47 @@ setup() {
 |-------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------|-------------|
 | name              | `input` 标签 `name` 的名称，发到后台的文件参数名                                                                                                                                       | String                            | "file"      |
 | url               | 上传服务器的接口地址                                                                                                                                                                   | String                            | -           |
-| default-file-list | 默认已经上传的文件列表                                                                                                                                                                 | object[]                          | -           |
-| file-list         | 默认已经上传的文件列表                                                                                                                                                                 | object[]                          | -           |
-| custom-request    | 通过覆盖默认的上传行为，可以自定义自己的上传实现                                                                                                                                       | Function                          | -           |
+| file-list         | 默认已经上传的文件列表                                                                                                                                                                 | FileItem[]                          | []           |
 | is-preview        | 是否上传成功后展示预览图                                                                                                                                                               | Boolean                           | true        |
 | is-deletable      | 是否展示删除按钮                                                                                                                                                                       | Boolean                           | true        |
 | method            | 上传请求的 http method                                                                                                                                                                 | String                            | "post"      |
 | capture           | 图片[选取模式](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#htmlattrdefcapture)，可选值为 camera (直接调起摄像头)                                                   | String                            | "camera"    |
-| max-size          | 可以设定最大上传文件的大小（字节）                                                                                                                                                     | Number丨String                    | -           |
+| max-size          | 可以设定最大上传文件的大小（字节）                                                                                                                                                     | Number丨String                    | Number.MAX_VALUE           |
 | max-count         | 文件上传数量限制                                                                                                                                                                       | Number丨String                    | 1           |
 | clear-input       | 是否需要清空`input`内容，设为`true`支持重复选择上传同一个文件                                                                                                                          | Boolean                           | false       |
 | accept-type       | 允许上传的文件类型，[详细说明](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file#%E9%99%90%E5%88%B6%E5%85%81%E8%AE%B8%E7%9A%84%E6%96%87%E4%BB%B6%E7%B1%BB%E5%9E%8B) | String                            | *           |
 | headers           | 设置上传的请求头部                                                                                                                                                                     | Object                            | {}          |
 | form-data         | 附加上传的信息 formData                                                                                                                                                                | Object                            | {}          |
-| upload-icon       | 上传区域[图标名称](#/zh-CN/icon)或图片链接                                                                                                                                             | String                            | photograph  |
+| upload-icon       | 上传区域[图标名称](#/zh-CN/icon)或图片链接                                                                                                                                             | String                            | "photograph"  |
 | xhr-state         | 接口响应的成功状态（status）值                                                                                                                                                         | Number                            | 200         |
 | with-credentials  | 支持发送 cookie 凭证信息                                                                                                                                                               | Boolean                           | fasle       |
 | multiple          | 是否支持文件多选                                                                                                                                                                       | Boolean                           | fasle       |
 | disabled          | 是否禁用文件上传                                                                                                                                                                       | Boolean                           | fasle       |
-| before-upload     | 上传前的函数需要返回一个对象                                                                                                                                                           | Function                          | input files |
-| before-delete     | 除文件时的回调，返回值为 false 时不移除。支持返回一个 Promise 对象，Promise 对象 resolve(false) 或 reject 时不移除                                                                     | Function(file): boolean 丨Promise | -           |
-| change         | 上传文件改变时的状态，详见                                                                                                                                                             | Function(fileList) 丨 Promise     | -           |
-| custom-request    | 通过覆盖默认的上传行为，可以自定义自己的上传实现                                                                                                                                       | Function                          | -           |
+| before-upload     | 上传前的函数需要返回一个`Promise`对象                                                                                                                                                           | Function                          | null |
+| before-delete     | 除文件时的回调，返回值为 false 时不移除。支持返回一个 `Promise` 对象，`Promise` 对象 resolve(false) 或 reject 时不移除                                                                     | Function(file): boolean 丨Promise | -           |
+
+
+
+### FileItem
+
+| 名称     | 说明                   | 默认值                         |
+|----------|------------------------|----------------------------------|
+| status    | 文件状态值，可选'ready,uploading,success,error,removed'           | "ready"                               |
+| uid | 文件的唯一标识         | new Date().getTime().toString() |
+| name | 文件名称 | ""                            |
+| url  | 文件路径               | ""                         |
+| type  | 文件类型               | "image/jpeg"                         |
+| formData  | 上传所需的data            | new FormData()    |
 
 ### Event
 
 | 名称     | 说明                   | 回调参数                         |
 |----------|------------------------|----------------------------------|
-| start    | 文件上传开始           | -                                |
-| progress | 文件上传的进度         | 上传文件、已上传数据量、总数据量 |
+| start    | 文件上传开始           | options                               |
+| progress | 文件上传的进度         | event，options |
 | oversize | 文件大小超过限制时触发 | files                            |
-| success  | 上传成功               | fileList                         |
-| failure  | 上传失败               | fileList                         |
+| success  | 上传成功               | responseText，options                         |
+| failure  | 上传失败               | responseText，options                         |
+| change  | 上传文件改变时的状态               | fileList，event                       |
+| delete  | 文件删除之前的状态               | files，fileList                         |
 
diff --git a/src/packages/uploader/index.vue b/src/packages/uploader/index.vue
index afba9cd09..2d2656bff 100644
--- a/src/packages/uploader/index.vue
+++ b/src/packages/uploader/index.vue
@@ -53,12 +53,12 @@ export default create({
   props: {
     name: { type: String, default: 'file' },
     url: { type: String, default: '' },
-    defaultFileList: { type: Array, default: () => new Array<FileItem>() },
+    // defaultFileList: { type: Array, default: () => new Array<FileItem>() },
     fileList: { type: Array, default: () => [] },
     isPreview: { type: Boolean, default: true },
     isDeletable: { type: Boolean, default: true },
     method: { type: String, default: 'post' },
-    capture: { type: String, default: '' },
+    capture: { type: String, default: 'camera' },
     maxSize: { type: [Number, String], default: Number.MAX_VALUE },
     maxCount: { type: [Number, String], default: 1 },
     clearInput: { type: Boolean, default: false },
@@ -72,9 +72,7 @@ export default create({
     disabled: { type: Boolean, default: false },
     beforeUpload: {
       type: Function,
-      default: (files: FileList) => {
-        return files;
-      }
+      default: null
     },
     beforeDelete: {
       type: Function,
@@ -82,8 +80,8 @@ export default create({
         return true;
       }
     },
-    onChange: { type: Function },
-    customRequest: { type: Function }
+    onChange: { type: Function }
+    // customRequest: { type: Function }
   },
   emits: [
     'start',
@@ -217,18 +215,20 @@ export default create({
       const $el = event.target as HTMLInputElement;
       let { files } = $el;
 
-      if (props.beforeUpload) {
-        files = props.beforeUpload(files);
-      }
-
-      const _files: File[] = filterFiles(new Array<File>().slice.call(files));
-
-      readFile(_files);
-
       if (props.clearInput) {
         clearInput($el);
       }
 
+      if (props.beforeUpload) {
+        props.beforeUpload(files).then((f: Array<File>) => {
+          const _files: File[] = filterFiles(new Array<File>().slice.call(f));
+          readFile(_files);
+        });
+      } else {
+        const _files: File[] = filterFiles(new Array<File>().slice.call(files));
+        readFile(_files);
+      }
+
       emit('change', {
         fileList,
         event
-- 
GitLab