Browse Source

feat: uploader 支持file文件流修改逻辑

richard1015 5 years ago
parent
commit
de6e51a776
3 changed files with 18 additions and 10 deletions
  1. 2 1
      src/packages/uploader/demo.vue
  2. 9 6
      src/packages/uploader/doc.md
  3. 7 3
      src/packages/uploader/uploader.vue

+ 2 - 1
src/packages/uploader/demo.vue

@@ -192,7 +192,8 @@ export default {
       console.log(event, '可以处理input选择的内容');
       return {
         event: event,
-        data: ''
+        data: '',
+        fileBlob: undefined // 强制修改file文件,此参数最终会作为formData中的文件流进行上传,替换event中的file
       };
     },
     demo1UploadStart() {

+ 9 - 6
src/packages/uploader/doc.md

@@ -177,12 +177,15 @@ preview(file) {
   ><nut-button small>上传图片前处理图片内容</nut-button></nut-uploader>
 ```
 ```js
-test($ev){   
-  console.log($ev,'可以处理input选择的内容')  
-  return {
-    event:$ev,
-    data:''
-  }
+test(event) {
+    console.log(event, '可以处理input选择的内容');
+    // ... 自定义逻辑
+    return {
+      event: event,
+      data: '',
+      fileBlob: undefined // 强制修改file文件,此参数最终会作为formData中的文件流进行上传,替换event中的file
+    };
+}
 },
 ```
 

+ 7 - 3
src/packages/uploader/uploader.vue

@@ -126,7 +126,7 @@ export default {
         }
       };
     },
-    uploadData($event, selfData = {}) {
+    uploadData($event, selfData = {}, fileBlob = undefined) {
       const tar = $event.target;
       if (!this.url) {
         this.$emit('showMsg', '请先配置上传url');
@@ -140,7 +140,11 @@ export default {
         opt.previewData = tar.files;
       }
       let len = this.multiple ? tar.files.length : 1;
-      formData.append(tar.name, tar.files[0]);
+      if (fileBlob) {
+        formData.append(tar.name, fileBlob);
+      } else {
+        formData.append(tar.name, tar.files[0]);
+      }
       for (const key of Object.keys(this.attach)) {
         formData.append(key, this.attach[key]);
       }
@@ -165,7 +169,7 @@ export default {
         });
         const resData = await promise;
         if (typeof resData === 'object' && typeof resData.event === 'object') {
-          this.uploadData(resData.event, resData.data);
+          this.uploadData(resData.event, resData.data, resData.fileBlob);
         } else {
           console.warn('resData: 必须包含 event字段且为input $event 的事件对象');
         }