Vue3 + axios + vue-vben-admin 實現單文件上傳功能

場景

最近一段時間使用 vue-vben-admin 上傳單文件中，用人家自定義的 uploadFile 出現了 process 未知問題，導致流程直接中斷，時間緊迫，索性自己用 axios 封裝了個。
代碼在對應位置都加了注釋，方便不同階段道友查看，大神可直接路過
上代碼

// src/utils/http/axios/upload.js
/**
 * @author zxn
 * @description axios 上傳單文件
 * @param {object.url} - 請求接口
 * @param {object.method} - 請求方法
 * @param {object.file} - 上傳的文件
 * @param {object.extraParams} - 上傳附加參數
 * @param {object.fileName} - 上傳的文件名稱
 * @param {object.config} - axios 其他配置
 */

import axios from 'axios';
import { getToken } from '/@/utils/auth'; // 獲取 token
import { useMessage } from '/@/hooks/web/useMessage'; // 引入提示框

const { createMessage } = useMessage(); // 引入 message 提示
const token = getToken();
let headers = { 'Content-Type': 'multipart/form-data', Authorization: token }; // 請求頭設置

// 因為整塊文件只有一個導出，所以使用默認導出功能，並使用 ES6 對參數進行默認賦值，不懂的小伙伴可看[阮大大的教程](https://es6.ruanyifeng.com/#docs/destructuring)
export default function ({
  url,
  method = 'POST',
  file,
  extraParams = {},
  fileName = 'file',
  config
} = {}) {
  // 創建 FormData 對象，並通過 append() 方法添加參數
  const fd = new FormData();
  fd.append(fileName, file);

  // 這里對附加參數進行統一處理，全部添加到 FormData 對象內
  Object.keys(extraParams).length &&
    Object.keys(extraParams).forEach(key => {
      if (Array.isArray(extraParams[key])) {
        extraParams[key].forEach(item => {
          fd.append(`${key}[]`, item);
        });
        return;
      }
      fd.append(key, extraParams[key]);
    });

  // 這里使用 Promise 對象，方便鏈式調用
  return new Promise((resolve, reject) => {
    axios
      .request({
        url,
        method,
        data: fd,
        headers,
        ...config
      })
      .then(({ data }) => {
        const { code, message } = data;
        if (code != 200) {
          createMessage.error(message);
          reject(new Error(message));
        }
        resolve(data);
      })
      .catch(error => {
        reject(new Error(error));
      });
  });
}