fix(uploader): taro h5 env upload error #1096

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

@@ -83,7 +83,7 @@ export class FileItem {
   name?: string;
   type?: string;
   percentage: string | number = 0;
-  formData: any = {};
+  formData: FormData = new FormData();
 }
 export type SizeType = 'original' | 'compressed';
 export type SourceType = 'album' | 'camera' | 'user' | 'environment';
@@ -175,10 +175,11 @@ export default create({
       const uploadOption = new UploadOptions();
       uploadOption.name = props.name;
       uploadOption.url = props.url;
-      for (const [key, value] of Object.entries(props.data)) {
-        fileItem.formData[key] = value;
-      }
+
       uploadOption.formData = fileItem.formData;
+      uploadOption.timeout = (props.timeout as number) * 1;
+      uploadOption.method = props.method;
+      uploadOption.xhrState = props.xhrState as number;
       uploadOption.method = props.method;
       uploadOption.headers = props.headers;
       uploadOption.taroFilePath = fileItem.path;
@@ -216,7 +217,7 @@ export default create({
       };
       let task = new Uploader(uploadOption);
       if (props.autoUpload) {
-        task.uploadTaro(Taro.uploadFile);
+        task.uploadTaro(Taro.uploadFile, Taro.getEnv());
       } else {
         uploadQueue.push(
           new Promise((resolve, reject) => {
@@ -235,7 +236,7 @@ export default create({
     };
     const submit = () => {
       Promise.all(uploadQueue).then((res) => {
-        res.forEach((i) => i.uploadTaro(Taro.uploadFile));
+        res.forEach((i) => i.uploadTaro(Taro.uploadFile, Taro.getEnv()));
       });
     };
 
@@ -252,6 +253,18 @@ export default create({
         fileItem.status = 'ready';
         fileItem.message = translate('waitingUpload');
         fileItem.type = fileType;
+        const formData = new FormData();
+        if (Taro.getEnv() == 'WEB') {
+          for (const [key, value] of Object.entries(props.data)) {
+            formData.append(key, value);
+          }
+          formData.append(props.name, file.originalFileObj as Blob);
+          fileItem.name = file.originalFileObj?.name;
+          fileItem.type = file.originalFileObj?.type;
+          fileItem.formData = formData;
+        } else {
+          fileItem.formData = props.data as FormData;
+        }
         if (props.isPreview) {
           fileItem.url = file.path;
         }

src/packages/__VUE/uploader/uploader.ts

@@ -51,36 +51,40 @@ export class Uploader {
       console.warn('浏览器不支持 XMLHttpRequest');
     }
   }
-  uploadTaro(uploadFile: Function) {
+  uploadTaro(uploadFile: Function, env: string) {
     const options = this.options;
-    const uploadTask = uploadFile({
-      url: options.url,
-      filePath: options.taroFilePath,
-      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 (env === 'WEB') {
+      this.upload();
+    } else {
+      const uploadTask = uploadFile({
+        url: options.url,
+        filePath: options.taroFilePath,
+        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);
-    });
+      });
+      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(); // 取消上传任务
+      // uploadTask.abort(); // 取消上传任务
+    }
   }
 }