wip: add upload component

src/utils/http/axios/Axios.ts

@@ -5,9 +5,10 @@ import { AxiosCanceler } from './axiosCancel';
 import { isFunction } from '/@/utils/is';
 import { cloneDeep } from 'lodash-es';
 
-import type { RequestOptions, CreateAxiosOptions, Result } from './types';
+import type { RequestOptions, CreateAxiosOptions, Result, UploadFileParams } from './types';
 // import { ContentTypeEnum } from '/@/enums/httpEnum';
 import { errorResult } from './const';
+import { ContentTypeEnum } from '/@/enums/httpEnum';
 
 export * from './axiosTransform';
 
@@ -107,25 +108,42 @@ export class VAxios {
       this.axiosInstance.interceptors.response.use(undefined, responseInterceptorsCatch);
   }
 
-  // /**
-  //  * @description:  文件上传
-  //  */
-  // uploadFiles(config: AxiosRequestConfig, params: File[]) {
-  //   const formData = new FormData();
+  /**
+   * @description:  文件上传
+   */
+  uploadFile<T = any>(config: AxiosRequestConfig, params: UploadFileParams) {
+    const formData = new window.FormData();
 
-  //   Object.keys(params).forEach((key) => {
-  //     formData.append(key, params[key as any]);
-  //   });
+    if (params.data) {
+      Object.keys(params.data).forEach((key) => {
+        if (!params.data) return;
+        const value = params.data[key];
+        // support key-value array data
+        if (Array.isArray(value)) {
+          value.forEach((item) => {
+            // { list: [ 11, 22 ] }
+            // formData.append('list[]', 11);
+            formData.append(`${key}[]`, item);
+          });
+          return;
+        }
 
-  //   return this.request({
-  //     ...config,
-  //     method: 'POST',
-  //     data: formData,
-  //     headers: {
-  //       'Content-type': ContentTypeEnum.FORM_DATA,
-  //     },
-  //   });
-  // }
+        formData.append(key, params.data[key]);
+      });
+    }
+
+    formData.append(params.name || 'file', params.file, params.filename);
+
+    return this.axiosInstance.request<T>({
+      ...config,
+      method: 'POST',
+      data: formData,
+      headers: {
+        'Content-type': ContentTypeEnum.FORM_DATA,
+        ignoreCancelToken: true,
+      },
+    });
+  }
 
   /**
    * @description:   请求方法

src/utils/http/axios/types.ts

@@ -28,3 +28,14 @@ export interface Result<T = any> {
   message: string;
   result: T;
 }
+// multipart/form-data：上传文件
+export interface UploadFileParams {
+  // 其他参数
+  data?: { [key: string]: any };
+  // 文件参数的接口字段名
+  name?: string;
+  // 文件
+  file: File | Blob;
+  // 文件名
+  filename?: string;
+}