场景:
- 使用axios上传文件给接口 参数显示为空对象
- 控制台报错: SyntaxError - expected expression, got ‘<‘
原因:
axios重新封装的问题
解决:
使用原生axios方法
//文件发生改变就会触发的事件
beforeXlsUpload(file) {
// 通过split方法和fileArr方法获取到文件的后缀名
let fileArr = file.name.split(".");
let suffix = fileArr[fileArr.length - 1];
//只能导入.xls和.xlsx文件
if (!/(xls|xlsx)/i.test(suffix)) {
this.$message("文件格式不正确");
return false;
}
//不能导入大小超过2Mb的文件
if (file.size > 2 * 1024 * 1024) {
this.$message("文件过大,请上传小于2MB的文件〜");
return false;
}
return true;
},
//文件发生改变就会触发的事件
handleUploadFun(file) {
if (this.beforeXlsUpload(file)) {
this.fileList.name = file.name;
this.fileList.url = "";
var formdata = new FormData();
formdata.append("file", file.raw);
axios
.post(this.uploadFileUrl, formdata, {
headers: {
Authorization: getToken(),
},
})
.then((res) => {
let resData = res.data;
if (resData.code == 200) {
if (resData.data == "200") {
this.getList();
this.$modal.msgSuccess("导入成功");
} else {
this.$confirm("部分信息导入成功,是否下载错误数据?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
getImport(resData.data).then((res2) => {
if (res2.code == 200) {
window.location = process.env.VUE_APP_BASE_API + res2.data;
this.getList();
// this.$modal.msgSuccess("下载成功");
}
});
})
.catch((e) => {
console.log(e);
this.$message({
type: "info",
message: "已取消",
});
});
}
this.msg = res.errMsg;
}
});
}
},
注意!!!
axios返回的res值为外层 之前获取为res.data 现在则需要写为res.data.data