feat(uploader): taro env before-xhr-upload #1535

src/packages/__VUE/uploader/doc.en-US.md

@@ -383,7 +383,7 @@ export default {
 | disabled          | Whether to disable file upload                                                                                                                   | Boolean                           | false            |
 | timeout           | timeout, in milliseconds                                                                                                                         | Number丨String                    | 1000 * 30        |
 | before-upload     | Hook before reading the file, return false to stop reading the file, can return Promise                                                          | Function                          | null             |
-| before-xhr-upload`v3.2.0` | Customize the method when uploading XHR                                                                                                                                                                          | Function(xhr，option)                          | null             |
+| before-xhr-upload`v3.2.1` | Customize the method when uploading XHR                                                                                                                                                                          | Function(xhr，option)                          | null             |
 | before-delete     | Hook before delete the file, return false to stop reading the file, can return Promise                                                           | Function(file): boolean 丨Promise | -                |
 
 

src/packages/__VUE/uploader/doc.md

@@ -287,7 +287,7 @@ export default {
 ```
 :::
 
-### 自定义上传方式(before-xhr-upload h5支持)
+### 自定义上传方式(before-xhr-upload)
 
 :::demo
 ```html
@@ -383,7 +383,7 @@ export default {
 | disabled          | 是否禁用文件上传                                                                                                                                                                       | Boolean                           | false            |
 | timeout           | 超时时间，单位为毫秒                                                                                                                                                                   | Number丨String                    | 1000 * 30        |
 | before-upload     | 上传前的函数需要返回一个`Promise`对象                                                                                                                                                  | Function                          | null             |
-| before-xhr-upload`v3.2.0 小程序暂不支持` | 执行 XHR 上传时，自定义方式                                                                                                                                                                          | Function(xhr，option)                          | null             |
+| before-xhr-upload`v3.2.1` | 执行 XHR 上传时，自定义方式                                                                                                                                                                          | Function(xhr，option)                          | null             |
 | before-delete     | 除文件时的回调，返回值为 false 时不移除。支持返回一个 `Promise` 对象，`Promise` 对象 resolve(false) 或 reject 时不移除                                                                 | Function(file): boolean 丨Promise | -                |
 
 

src/packages/__VUE/uploader/doc.taro.md

@@ -76,6 +76,62 @@ app.use(Progress);
 ``` html
 <nut-uploader :url="uploadUrl" :data="formData" :headers="formData" :with-Credentials="true"></nut-uploader>
 ```
+
+### 自定义上传方式(before-xhr-upload)
+
+:::demo
+```html
+<template>
+  <nut-uploader url="https://xxxx" @before-xhr-upload="beforeXhrUpload"></nut-uploader>
+</template>
+
+<script lang="ts">
+import { ref } from 'vue';
+export default {
+  setup() {
+    // source file https://github.com/jdf2e/nutui/blob/next/src/packages/__VUE/uploader/uploader.ts#L6
+    const beforeXhrUpload = (taroUploadFile: any, options: any) => {
+      //taroUploadFile  是 Taro.uploadFile ， 你也可以自定义设置其它函数
+      const uploadTask = taroUploadFile({
+        url: options.url,
+        filePath: options.taroFilePath,
+        fileType: options.fileType,
+        header: {
+          'Content-Type': 'multipart/form-data',
+          ...options.headers
+        }, //
+        formData: options.formData,
+        name: options.name,
+        success(response: { errMsg: any; statusCode: number; data: string }) {
+          if (options.xhrState == response.statusCode) {
+            options.onSuccess?.(response, options);
+          } else {
+            options.onFailure?.(response, options);
+          }
+        },
+        fail(e: any) {
+          options.onFailure?.(e, options);
+        }
+      });
+      options.onStart?.(options);
+      uploadTask.progress((res: { progress: any; totalBytesSent: any; totalBytesExpectedToSend: any }) => {
+        options.onProgress?.(res, options);
+        // console.log('上传进度', res.progress);
+        // console.log('已经上传的数据长度', res.totalBytesSent);
+        // console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend);
+      });
+      // uploadTask.abort(); // 取消上传任务
+    };
+     return {
+      beforeXhrUpload
+    };
+  }
+}
+</script>
+```
+:::
+
+
 ### 选中文件后，通过按钮手动执行上传
     
 ``` html 
@@ -190,6 +246,7 @@ setup() {
 | disabled          | 是否禁用文件上传                                                                                                       | Boolean                           | false                     |
 | timeout           | 超时时间，单位为毫秒                                                                                                   | Number丨String                    | 1000 * 30                 |
 | before-upload     | 上传前的函数需要返回一个`Promise`对象                                                                                                                                                  | Function                          | null             |
+| before-xhr-upload`v3.2.1` | 执行 Taro.uploadFile 上传时，自定义方式                                                                                                                                                                          | Function(Taro.uploadFile，option)                          | null             |
 | before-delete     | 除文件时的回调，返回值为 false 时不移除。支持返回一个 `Promise` 对象，`Promise` 对象 resolve(false) 或 reject 时不移除 | Function(file): boolean 丨Promise | -                         |
 
 

src/packages/__VUE/uploader/index.taro.vue

@@ -104,6 +104,10 @@ export default create({
       type: Function,
       default: null
     },
+    beforeXhrUpload: {
+      type: Function,
+      default: null
+    },
     beforeDelete: {
       type: Function,
       default: (file: import('./type').FileItem, files: import('./type').FileItem[]) => {
@@ -164,6 +168,7 @@ export default create({
       uploadOption.method = props.method;
       uploadOption.headers = props.headers;
       uploadOption.taroFilePath = fileItem.path;
+      uploadOption.beforeXhrUpload = props.beforeXhrUpload;
       uploadOption.onStart = (option: UploadOptions) => {
         fileItem.status = 'ready';
         fileItem.message = translate('readyUpload');

src/packages/__VUE/uploader/uploader.ts

@@ -63,36 +63,39 @@ export class Uploader {
     if (env === 'WEB') {
       this.upload();
     } else {
-      const uploadTask = uploadFile({
-        url: options.url,
-        filePath: options.taroFilePath,
-        fileType: options.fileType,
-        header: {
-          'Content-Type': 'multipart/form-data',
-          ...options.headers
-        }, //
-        formData: options.formData,
-        name: options.name,
-        success(response: { errMsg: any; statusCode: number; data: string }) {
-          if (options.xhrState == response.statusCode) {
-            options.onSuccess?.(response, options);
-          } else {
-            options.onFailure?.(response, options);
+      if (options.beforeXhrUpload) {
+        options.beforeXhrUpload(uploadFile, options);
+      } else {
+        const uploadTask = uploadFile({
+          url: options.url,
+          filePath: options.taroFilePath,
+          fileType: options.fileType,
+          header: {
+            'Content-Type': 'multipart/form-data',
+            ...options.headers
+          }, //
+          formData: options.formData,
+          name: options.name,
+          success(response: { errMsg: any; statusCode: number; data: string }) {
+            if (options.xhrState == response.statusCode) {
+              options.onSuccess?.(response, options);
+            } else {
+              options.onFailure?.(response, options);
+            }
+          },
+          fail(e: any) {
+            options.onFailure?.(e, options);
           }
-        },
-        fail(e: any) {
-          options.onFailure?.(e, options);
-        }
-      });
-      options.onStart?.(options);
-      uploadTask.progress((res: { progress: any; totalBytesSent: any; totalBytesExpectedToSend: any }) => {
-        options.onProgress?.(res, options);
-        // console.log('上传进度', res.progress);
-        // console.log('已经上传的数据长度', res.totalBytesSent);
-        // console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend);
-      });
-
-      // uploadTask.abort(); // 取消上传任务
+        });
+        options.onStart?.(options);
+        uploadTask.progress((res: { progress: any; totalBytesSent: any; totalBytesExpectedToSend: any }) => {
+          options.onProgress?.(res, options);
+          // console.log('上传进度', res.progress);
+          // console.log('已经上传的数据长度', res.totalBytesSent);
+          // console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend);
+        });
+        // uploadTask.abort(); // 取消上传任务
+      }
     }
   }
 }

src/sites/mobile-taro/vue/src/dentry/pages/uploader/index.vue

@@ -40,6 +40,8 @@
     <nut-uploader :url="uploadUrl" :maximize="1024 * 50" @oversize="onOversize"></nut-uploader>
     <h2>自定义数据 FormData 、 headers </h2>
     <nut-uploader :url="uploadUrl" :data="formData" :headers="formData" :with-credentials="true"></nut-uploader>
+    <h2>自定义 Taro.uploadFile 上传方式(before-xhr-upload) </h2>
+    <nut-uploader :url="uploadUrl" @before-xhr-upload="beforeXhrUpload"></nut-uploader>
     <h2>选中文件后，通过按钮手动执行上传 </h2>
     <nut-uploader :url="uploadUrl" maximum="5" :auto-upload="false" ref="uploadRef"></nut-uploader>
     <br />
@@ -96,6 +98,39 @@ export default {
       uploadRef.value.submit();
     };
 
+    const beforeXhrUpload = (taroUploadFile: any, options: any) => {
+      //taroUploadFile  是 Taro.uploadFile ， 你也可以自定义设置其它函数
+      const uploadTask = taroUploadFile({
+        url: options.url,
+        filePath: options.taroFilePath,
+        fileType: options.fileType,
+        header: {
+          'Content-Type': 'multipart/form-data',
+          ...options.headers
+        }, //
+        formData: options.formData,
+        name: options.name,
+        success(response: { errMsg: any; statusCode: number; data: string }) {
+          if (options.xhrState == response.statusCode) {
+            options.onSuccess?.(response, options);
+          } else {
+            options.onFailure?.(response, options);
+          }
+        },
+        fail(e: any) {
+          options.onFailure?.(e, options);
+        }
+      });
+      options.onStart?.(options);
+      uploadTask.progress((res: { progress: any; totalBytesSent: any; totalBytesExpectedToSend: any }) => {
+        options.onProgress?.(res, options);
+        // console.log('上传进度', res.progress);
+        // console.log('已经上传的数据长度', res.totalBytesSent);
+        // console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend);
+      });
+      // uploadTask.abort(); // 取消上传任务
+    };
+
     return {
       onOversize,
       onDelete,
@@ -105,7 +140,8 @@ export default {
       defaultFileList,
       formData,
       uploadRef,
-      submitUpload
+      submitUpload,
+      beforeXhrUpload
     };
   }
 };