原生input标签的文件上传

<input type="file" @change="getFile" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" />

 // 获取上传文件
  const getFile = async (v) => {
    console.log(v.target.files[0]);

    let resultFile = v.target.files[0];
    //通过formData保存上传的文件
    const formData = new FormData();
    formData.append('file', resultFile);
    

    let temp = await excelImport(formData);
    console.log(temp);
    if (temp) {
      createMessage.success('导入成功!');
      reload();//刷新表格
    }
  };

/**
 * @description:导入奖励记录
 * @param {} param
 * @return {boolean}
 */
export const excelImport = async (param) => {
  console.log('请求参数', param);
  const res = await BnUplodeRequest.post(API.excelImport, param);
  console.log('返回结果', res);
  return res;
};

封装文件上传的axios

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
import Crypto from './Crypto';
import { useAppStore } from '/@/store/modules/app';

import { Constants } from '/@/Constants';
import { useGlobSetting } from '/@/hooks/setting';

import Notification from '/@/bn/Notification';
import BnStorage from '/@/bn/BnStorage';
import Storage, { StorageKey } from '/@/bn/BnStorage';
import qs from 'qs';

interface Result {
  code: string;
  message: string;
  data: any;
  encrypted: boolean;
}

class BnUplodeRequest {
  private instance: AxiosInstance;

  constructor() {
    const serverUrl = useGlobSetting().serverUrl || '/';
    console.log(serverUrl);
    this.instance = axios.create({
      baseURL: serverUrl,
      timeout: 10000,
      responseType: 'json',
      headers: {
        'content-type': 'multipart/form-data',
      },
    });

    this.instance.interceptors.request.use(this.requestIntercept);
    this.instance.interceptors.response.use(this.responseIntercept);
  }

  async post<T>(uri: string, formData: FormData): Promise<T> {
    return this.request('POST', uri, formData);
  }

  private requestIntercept(request: AxiosRequestConfig): AxiosRequestConfig {
    const appStore = useAppStore();
    console.log(request);

    const data = qs.stringify(request.params) || {};
    console.log(data);

    const paramEncrypted: any = {};

    if (appStore.token) {
      paramEncrypted.X_ACCESS_TOKEN = appStore.token;
    }
    request.params = paramEncrypted;
    return request;
  }

  //setTimeOut仅仅供测试
  private responseIntercept(response: AxiosResponse): AxiosResponse {
    const appStore = useAppStore();
    const data: Result = response.data as Result;
    if (data.code === Constants.REQUEST_SUCCESS) {
      if (data.encrypted) {
        data.data = Crypto.decrypt(data.data, appStore.keyInfo.key, appStore.keyInfo.iv);
      }
      try {
        data.data = JSON.parse(data.data);
      } catch (e) {
        console.log(data.data + 'is Not a regular Json String');
      }
      return data.data;
    }
    throw new Error(data.message);
  }

  private async request(method: 'POST' | 'GET', uri: string, formData: FormData): Promise<any> {
    return this.instance
      .request({
        url: uri,
        method,
        data: formData,
      })
      .catch(async (error) => {
        if (axios.isAxiosError(error)) {
          Notification.showNotice('网络出现异常或存在其他问题，请稍后重试');
        } else if (error.message === '参数解密失败，客户端秘钥错误或已过期') {
          Notification.showNotice('参数解密失败,请重新登录');
          BnStorage.remove(StorageKey.KEY_INFO);
        } else {
          Notification.showNotice(error.message);
        }
      });
  }
}

export default new BnUplodeRequest();