1.文件流,对应的文件下载
axios请求时
因为后端接口返回的是文件流形式,所以在用axios进行请求时,要加上responseType: ‘blob’;如下:
post请求:
return axios.post(url, data, {responseType: 'blob'});
get请求:
return axios.get(url, {
params: data,
responseType: 'blob'
});
请求成功后处理,并通过创建a标签进行下载
api.downTemplate().then(res => {
console.log(res);
if (res.status == 200) {
this.$message.success('请求成功,正在导出');
let blob = new Blob([res.data], {
type: "application/vnd.ms-excel"
});
let url = window.URL.createObjectURL(blob);
let link = document.createElement("a");
link.style.display = "none";
link.download = "导入模板.xlsx"; // 可设置文件名
link.href = url;
document.body.appendChild(link);
link.click();
}
});
2. 图片流,对应的图片显示(图片验证码)
axios请求时
同文件流处理方式相同,加上 responseType: ‘blob’
请求成功后处理
<img :src="imgUrl" alt="图片加载中...">
this.imgUrl = window.URL.createObjectURL(res.data);