File upload of native input tag

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

 //  Get the upload file 
  const getFile = async (v) => {
    
    console.log(v.target.files[0]);

    let resultFile = v.target.files[0];
    // adopt formData Save uploaded files 
    const formData = new FormData();
    formData.append('file', resultFile);
    

    let temp = await excelImport(formData);
    console.log(temp);
    if (temp) {
    
      createMessage.success(' Successful import !');
      reload();// Refresh table 
    }
  };

/** * @description: Import reward records  * @param {} param * @return {boolean} */
export const excelImport = async (param) => {
    
  console.log(' Request parameters ', param);
  const res = await BnUplodeRequest.post(API.excelImport, param);
  console.log(' Return results ', res);
  return res;
};

Package file upload 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 For testing only 
  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(' The network is abnormal or has other problems , Please try again later ');
        } else if (error.message === ' Parameter decryption failed , The client secret key is wrong or expired ') {
    
          Notification.showNotice(' Parameter decryption failed , Please login again ');
          BnStorage.remove(StorageKey.KEY_INFO);
        } else {
    
          Notification.showNotice(error.message);
        }
      });
  }
}

export default new BnUplodeRequest();