feat(uploader): add props before-xhr-upload

src/packages/__VUE/uploader/demo.vue

@@ -34,6 +34,8 @@
     <nut-uploader :url="uploadUrl" multiple :before-upload="beforeUpload"> </nut-uploader>
     <h2>{{ translate('title9') }}</h2>
     <nut-uploader :url="uploadUrl" :data="formData" :headers="formData" :with-credentials="true"></nut-uploader>
+    <h2>{{ translate('title13') }}</h2>
+    <nut-uploader :url="uploadUrl" method="put" @before-xhr-upload="beforeXhrUpload"></nut-uploader>
     <h2>{{ translate('title10') }}</h2>
     <nut-uploader :url="uploadUrl" maximum="5" :auto-upload="false" ref="uploadRef"></nut-uploader>
     <br />
@@ -65,7 +67,8 @@ const initTranslate = () =>
       title9: '自定义数据 FormData 、 headers ',
       title10: '选中文件后，通过按钮手动执行上传',
       title11: '执行上传',
-      title12: '禁用状态'
+      title12: '禁用状态',
+      title13: '自定义 xhr 上传方式(before-xhr-upload)'
     },
     'en-US': {
       basic: 'Basic Usage',
@@ -81,7 +84,8 @@ const initTranslate = () =>
       title9: 'Custom data FormData , headers',
       title10: 'Once the file is selected, manually perform the upload via the button',
       title11: 'Perform upload',
-      title12: 'Disabled state'
+      title12: 'Disabled state',
+      title13: 'Customize XHR upload (before-xhr-upload)'
     }
   });
 export default createDemo({
@@ -159,6 +163,13 @@ export default createDemo({
       const f = await new File([blob], fileName);
       return [f];
     };
+    const beforeXhrUpload = (xhr: XMLHttpRequest, options: any) => {
+      if (options.method.toLowerCase() == 'put') {
+        xhr.send(options.sourceFile);
+      } else {
+        xhr.send(options.formData);
+      }
+    };
     const uploadRef = ref<any>(null);
     const submitUpload = () => {
       uploadRef.value.submit();
@@ -166,6 +177,7 @@ export default createDemo({
     return {
       onOversize,
       beforeUpload,
+      beforeXhrUpload,
       onDelete,
       onProgress,
       progressPercentage,

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

@@ -286,6 +286,37 @@ export default {
 </script>
 ```
 :::
+
+### Customize XHR upload(before-xhr-upload）
+
+:::demo
+```html
+<!-- When the upload method is put, upload the source file stream directly -->
+<template>
+  <nut-uploader url="https://xxxx" method="put" @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#L51
+     const beforeXhrUpload=(xhr:XMLHttpRequest,options:any)=>{
+        if (options.method.toLowerCase() == 'put') {
+          xhr.send(options.sourceFile);
+        }else{
+          xhr.send(options.formData);
+        }
+     }
+     return {
+      beforeXhrUpload
+    };
+  }
+}
+</script>
+```
+:::
+
 ### Once the file is selected, manually perform the upload via the button
     
 :::demo
@@ -352,6 +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-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

@@ -286,6 +286,37 @@ export default {
 </script>
 ```
 :::
+
+### 自定义上传方式(before-xhr-upload h5支持)
+
+:::demo
+```html
+<!-- 当上传方式为put时，直接上传源文件file流 -->
+<template>
+  <nut-uploader url="https://xxxx" method="put" @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#L51
+     const beforeXhrUpload=(xhr:XMLHttpRequest,options:any)=>{
+        if (options.method.toLowerCase() == 'put') {
+          xhr.send(options.sourceFile);
+        }else{
+          xhr.send(options.formData);
+        }
+     }
+     return {
+      beforeXhrUpload
+    };
+  }
+}
+</script>
+```
+:::
+
 ### 选中文件后，通过按钮手动执行上传
     
 :::demo
@@ -352,6 +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-delete     | 除文件时的回调，返回值为 false 时不移除。支持返回一个 `Promise` 对象，`Promise` 对象 resolve(false) 或 reject 时不移除                                                                 | Function(file): boolean 丨Promise | -                |
 
 
@@ -377,7 +409,7 @@ export default {
 | success         | 上传成功               | {responseText,option,fileItem} |
 | failure         | 上传失败               | {responseText,option,fileItem} |
 | change          | 上传文件改变时的状态   | {fileList,event}               |
-| delete          | 文件删除事件     | {files,fileList,index}               |
+| delete          | 文件删除事件           | {files,fileList,index}         |
 | file-item-click | 文件上传成功后点击触发 | {fileItem}                     |
 
 ### Methods

src/packages/__VUE/uploader/index.vue

@@ -137,6 +137,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[]) => {
@@ -185,6 +189,7 @@ export default create({
       uploadOption.xhrState = props.xhrState as number;
       uploadOption.headers = props.headers;
       uploadOption.withCredentials = props.withCredentials;
+      uploadOption.beforeXhrUpload = props.beforeXhrUpload;
       try {
         uploadOption.sourceFile = fileItem.formData.get(props.name);
       } catch (error) {}

src/packages/__VUE/uploader/uploader.ts

@@ -14,6 +14,7 @@ export class UploadOptions {
   onProgress?: Function;
   onSuccess?: Function;
   onFailure?: Function;
+  beforeXhrUpload?: Function;
 }
 export class Uploader {
   options: UploadOptions;
@@ -48,8 +49,8 @@ export class Uploader {
         xhr.setRequestHeader(key, value as string);
       }
       options.onStart?.(options);
-      if (options.method.toLowerCase() == 'put') {
-        xhr.send(options.sourceFile);
+      if (options.beforeXhrUpload) {
+        options.beforeXhrUpload(xhr, options);
       } else {
         xhr.send(options.formData);
       }