perf(upload): improve upload component

src/utils/file/download.ts

@@ -1,5 +1,25 @@
-import { dataURLtoBlob } from './stream';
+import { dataURLtoBlob, urlToBase64 } from './stream';
 
+/**
+ * Download online pictures
+ * @param url
+ * @param filename
+ * @param mime
+ * @param bom
+ */
+export function downloadByOnlineUrl(url: string, filename: string, mime?: string, bom?: BlobPart) {
+  urlToBase64(url).then((base64) => {
+    downloadByBase64(base64, filename, mime, bom);
+  });
+}
+
+/**
+ * Download pictures based on base64
+ * @param buf
+ * @param filename
+ * @param mime
+ * @param bom
+ */
 export function downloadByBase64(buf: string, filename: string, mime?: string, bom?: BlobPart) {
   const base64Buf = dataURLtoBlob(buf);
   downloadByData(base64Buf, filename, mime, bom);

src/utils/file/stream.ts

@@ -13,3 +13,29 @@ export function dataURLtoBlob(base64Buf: string): Blob {
   }
   return new Blob([u8arr], { type: mime });
 }
+
+/**
+ * img url to base64
+ * @param url
+ */
+export function urlToBase64(url: string, mineType?: string): Promise<string> {
+  return new Promise((resolve, reject) => {
+    let canvas = document.createElement('CANVAS') as Nullable<HTMLCanvasElement>;
+    const ctx = canvas!.getContext('2d');
+
+    const img = new Image();
+    img.crossOrigin = '';
+    img.onload = function () {
+      if (!canvas || !ctx) {
+        return reject();
+      }
+      canvas.height = img.height;
+      canvas.width = img.width;
+      ctx.drawImage(img, 0, 0);
+      const dataURL = canvas.toDataURL(mineType || 'image/png');
+      canvas = null;
+      resolve(dataURL);
+    };
+    img.src = url;
+  });
+}

src/utils/http/axios/Axios.ts

@@ -118,11 +118,8 @@ export class VAxios {
       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;

src/utils/http/axios/index.ts

@@ -160,20 +160,18 @@ const transform: AxiosTransform = {
     try {
       if (code === 'ECONNABORTED' && message.indexOf('timeout') !== -1) {
         createMessage.error('接口请求超时,请刷新页面重试!');
-        return;
       }
       if (err && err.includes('Network Error')) {
         createErrorModal({
           title: '网络异常',
           content: '请检查您的网络连接是否正常!',
         });
-        return;
       }
     } catch (error) {
       throw new Error(error);
     }
     checkStatus(error.response && error.response.status, msg);
-    return error;
+    return Promise.reject(error);
   },
 };
 

src/utils/http/axios/types.ts

@@ -38,4 +38,5 @@ export interface UploadFileParams {
   file: File | Blob;
   // 文件名
   filename?: string;
+  [key: string]: any;
 }