axios请求设置responseType为'blob'或'arraybuffer'下载时如何正确处理返回值
代码修整工 人气:0问题:
调用后台图片接口,后台返回二进制流图片数据格式。前端接收到流后处理数据显示在img标签。
解决:
1、设置axios接收参数格式为"arraybuffer":
responseType: 'arraybuffer'
2、转换为base64格式图片数据在img标签显示:
return 'data:image/png;base64,' + btoa( new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), '') );
返回的string直接放在img标签src可直接显示
设置axios接收参数格式为"blob":
axios.post( ExportUrl, Params, { responseType: 'blob' }) .then(function(response) { this.url = window.URL.createObjectURL(new Blob([response.data])); });
通过a标签下载文件
const url = '下载的url链接'; const link = document.createElement('a'); link.href = url; link.target = '_blank'; link.setAttribute('download', 'Excel名字.xlsx'); document.body.appendChild(link); link.click();
responseType值的类型
值 | 数据类型 |
---|---|
‘’ | DOMString(默认类型) |
arraybuffer | ArrayBuffer对象 |
blob | Blob对象 |
document | Documnet对象 |
json | JavaScript object, parsed from a JSON string returned by the server |
text | DOMString |
实例
返回值不同情况的处理方式,举例如下:
①、请求设置为 responseType: ‘arraybuffer’,
请求成功时,后端返回文件流,正常导出文件;
请求失败时,后端返回json对象,如:{“Status”:“false”,“StatusCode”:“500”,“Result”:“操作失败”},也被转成了arraybuffer
此时请求成功和失败返回的http状态码都是200
解决方案:将已转为arraybuffer类型的数据转回Json对象,然后进行判断
代码如下
async downloadFile (file) { let res = await this.$axios.post(this.API.order.tradeImpExcle, { responseType: "arraybuffer" }); if (!res) return; try { //如果JSON.parse(enc.decode(new Uint8Array(res.data)))不报错,说明后台返回的是json对象,则弹框提示 //如果JSON.parse(enc.decode(new Uint8Array(res.data)))报错,说明返回的是文件流,进入catch,下载文件 let enc = new TextDecoder('utf-8') res = JSON.parse(enc.decode(new Uint8Array(res.data))) //转化成json对象 if (res.Status == "true") { this.refresh() this.$message.success(res.Msg) } else { this.$message.error(res.Result) } } catch (err) { const content = res.data; const blob = new Blob([content]); let url = window.URL.createObjectURL(blob); let link = document.createElement("a"); link.style.display = "none"; link.href = url; link.setAttribute( "download", res.headers["content-disposition"].split("=")[1] ); document.body.appendChild(link); link.click(); } }
②、请求设置为 responseType: ‘blob’,
解决方案:将已转为blob类型的数据转回Json对象,然后进行判断
代码如下
async downloadFile (file) { let formData = new FormData(); formData.append("allTradesExcelFile", file); let res = await this.$axios.post(this.API.order.tradeImpExcle, formData, { responseType: "blob" }); if (!res) return; let r = new FileReader() let _this = this r.onload = function () { try { // 如果JSON.parse(this.result)不报错,说明this.result是json对象,则弹框提示 // 如果JSON.parse(this.result)报错,说明返回的是文件流,进入catch,下载文件 res = JSON.parse(this.result) if (res.Status == "true") { _this.refresh() _this.$message.success(res.Msg) } else { _this.$message.error(res.Result) } } catch (err) { const content = res.data; const blob = new Blob([content]); let url = window.URL.createObjectURL(blob); let link = document.createElement("a"); link.style.display = "none"; link.href = url; link.setAttribute( "download", res.headers["content-disposition"].split("=")[1] ); document.body.appendChild(link); link.click(); } } r.readAsText(res.data) // FileReader的API }
总结
加载全部内容