前端 Excel文件导入

前端调接口做处理

<el-upload 
    class="upload-demo 
    inline-block" 
    action="#" 
    :http-request="httpRequest" 
    :show-file-list="false"             
    :on-change="handleChange" 
    :before-upload="beforeAvatarUpload" 
    multiple           
    accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
>    
    <button class="bg">
       <img src="../../../public/img/import.png" alt="" /> 导入
    </button>
</el-upload>

使用element-ui组件库中的upload，配三个方法

    //验证文件类型
    beforeAvatarUpload(file) {
      console.log(file);
      const isXls =
        file.type === "application/vnd.ms-excel"
          ? true
          : file.type ===
            "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
            ? true
            : false;
      if (!isXls) {
        alert("上传的文件只能是xls以及xlsx格式!");
      }
      return isXls;
    },
    // 判断文件个数
    handleChange(file, fileList) {
      if (fileList.length >= 2) {
        return;
      }
      if (fileList.length === 1) {
        this.hasFile = true;
      }
      this.dataForm.file = file;
      console.log(this.dataForm.file);
    },
    // 导入
    httpRequest(param) {
      console.log(param.file);
      let formData = new FormData();
      formData.append('file', this.dataForm.file.raw);
      let configHeaders = {
        headers: { "Content-Type": "multipart/form-data" }
      };
      this.$axios
        .post("/dicData/importExcel", formData, configHeaders)
        .then((res) => {
          console.log(res);
          // 重新渲染页面
          this.getDicData();
        })
        .catch((e) => {
          console.log(e);
        });
    },

数据存放和写入

// 导入
dataForm: {
    name: "",
    file: null,
},