32、vue 前端调用后端接口导入Excel文件

vue模板代码

	<el-row style="display: flex;justify-content: center;align-items: center">
          <el-button type="primary" size="mini" @click="choicePDF">导入</el-button>
              <input
                  ref="filElemPDF"
                  type="file"
                  @change="getFilePDF"
                  style="display: none"
                  id="fileUploadPDF"
                  multiple="multiplt"
                />
	</el-row>

js代码

// 导入
        choicePDF() {
        //给输入框添加自定义触发事件，使用dispatchEvent来进行手动触发
            this.$refs.filElemPDF.dispatchEvent(new MouseEvent("click"));
        },
        getFilePDF(e) {
            let file = e.target.files;
            var arr = ["pdf", "doc", "docx"];
            for (let i = 0; i < file.length; i++) {
                //取出上传文件的扩展名
                let flag = false;
                var index = file[i].name.lastIndexOf(".");
                var ext = file[i].name.substr(index + 1);
                var name = file[i].name;
                if (ext == "xls" || ext == "xlsx") {
                    let formData = new FormData();
                    formData.append("files", file[i]); // 文件对象
                    //调用导入后台接口
                    axios.post("/mda/unitCapacity/v1/importExcel", formData, {
                        headers: {
                            "Content-Type": "multipart/form-data",
                            access_token: sessionStorage.getItem("token"),
                        },
                    })
                        .then((res) => {
                            if (res.data.success) {
                                this.getInitData();//数据上传成功刷新表格数据
                                this.$message({
                                    message: "文件上传成功！",
                                    type: "success",
                                });
                            }
                        });
                } else {
                    this.$message({
                        message: "仅支持excel表格导入！",
                        type: "warning",
                    });
                }
            }
        },