前端使用axios调后端接口来处理文件(word、pdf等)
考虑到项目后期维护,自己封装了axios方法,方便项目后期更换服务器
api.js
import axios from 'axios'
axios.defaults.withCredentials = true
// axios.defaults.headers.common['Authorization'] = localStorage.getItem('token')
export default async (
url,
data = {},
method = '',
headers = {},
responseType = ''
) => {
try {
return new Promise((success, error) => {
axios({
url: url,
data,
method,
headers,
responseType
})
.then((res) => {
success(res)
})
.catch((res) => {
error(res)
})
})
} catch (err) {
// console.log(err)
}
}
上传文件:
// 上传
Upload(file) {
let that = this;
console.log(file);
let url = "";
// 根据上传文件的地方不同,用switch筛选,确定相应的上传url
switch (that.upload_content.type) {
case "Contract":
url = "接口1";
break;
case "Voucher":
url = "接口2";
break;
case "Invoice":
url = "接口3";
break;
case "Checklist":
url = "接口4";
break;
default:
break;
}
if (
that.upload_content.type == "pdf" &&
file.file.name.split(".").slice(-1) != "pdf"
) {
this.$message.warning("上传合同(模版)只能是pdf格式!");
} else {
// 文件和参数都应当转换为FormData
let fileFormData = new FormData();
fileFormData.append("file", file.file);
fileFormData.append("operatorName", that.upload_content.operatorName);
fileFormData.append("operatorGh", that.upload_content.operatorGh);
fileFormData.append(
"operatorDepartment",
that.upload_content.operatorDepartment
);
fileFormData.append("remarks", that.upload_content.remarks);
fileFormData.append(
"transferProcessId",
that.upload_content.transferProcessId
);
console.log(fileFormData);
that
.request(url, fileFormData, "POST", {})
.then((res) => {
console.log(res);
if (res.data.status == "success") {
this.$message({
type: "success",
message: "上传成功!",
});
that.refresh();
} else {
this.$message({
message: res.data.data.errMsg,
type: "error",
});
}
})
.catch((err) => {
console.log(err);
this.$message({
message: "出错了!",
type: "error",
});
});
}
},
下载文件:
// 下载文件
let downloadFiles = function (url) {
request(url, {}, "GET", {}, "blob")
.then((res) => {
console.log(res)
if (res.headers["content-disposition"] != undefined) {
alert("准备开始下载!");
let filename = decodeURI(
res.headers["content-disposition"].split("fileName=")[1]
);
try {
let blob = new Blob([res.data], {
type: `application/force-download`, //word文档为msword,pdf文档为pdf
});
let objectUrl = URL.createObjectURL(blob);
let link = document.createElement("a");
link.href = objectUrl;
link.setAttribute("download", filename);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
} catch (err) {
console.log(err);
alert("数据请求失败!");
}
} else {
// 下载出错获取错误信息
request(url, {}, "GET", {}).then((res) => {
alert(res.data.data.errMsg);
})
}
})
.catch((err) => {
console.log(err);
alert("出错了!");
});
}
export default {
downloadFiles
}