vue导入excel

1、大体样子

2、接口部分采用的时postFile

/**
 * 上传文件
 * @param url
 * @param params
 * @returns {*}
 */
export const postFile = async function(url, formdata) {
  let res = await axios({
    url: url,
    method: 'post',
    data: formdata,
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
      authenticator: getAuthenticator(),
    },
  });
  return responseHandler(res);
};

3、页面部分–流程点击“浏览”，input中展示文件名，点击“导入”传入相关文件。

    <Modal title="导入客流上限" v-model="displayImportModal">
      <div class="lead-modal-content">
        <Input :value="fileName" :readonly="true" class="filename-display" />
        <Upload
          action
          :show-upload-list="false"
          accept="application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
          :before-upload="getFile"
          class="btn-upload"
        >
          <Button>浏览</Button>
        </Upload>
      </div>
      <div slot="footer" class="modal-footer">
        <Button @click="exportTemplate">下载模板</Button>
        <Button type="primary" @click="importExcel">导入</Button>
      </div>
    </Modal>

  /**
   * 获取上传的文件
   */
  getFile(file){
    this.file = file;
    this.fileName = file.name;
    return false;
  },
    /**
   * 导入目标excel
   */
  async importExcel(){
    if (this.file == null) {
      //提醒没有相关文件
      return;
    }
    let file = new FormData();  //导入excel的重点
    file.append('file',this.file); //导入excel的重点
    try {
      const res = await apis.importUpperLimitExcel(file);//将相关文件放入接口中
      this.clearFile();
    } catch(e) {
      this.clearFile();
    }
  },
  //清除文件，以及文件名
  clearFile(){
    this.file = null;
    this.fileName = null;
  }