axios请求设置responseType为‘blob‘或‘arraybuffer‘下载时，正确处理返回值(axios请求设置超时时间)

axios请求设置responseType为‘blob‘或‘arraybuffer‘下载时，正确处理返回值

推荐整理分享axios请求设置responseType为‘blob‘或‘arraybuffer‘下载时，正确处理返回值(axios请求设置超时时间)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:axios请求配置,axios请求设置超时时间,axios请求设置cookie,axios请求设置cookie,axios请求设置cookie,axios设置请求超时,axios response,axios请求设置超时时间,内容如对您有帮助，希望把文章链接给更多的朋友！

问题：调用后台图片接口，后台返回二进制流图片数据格式。前端接收到流后处理数据显示在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(默认类型)arraybufferArrayBuffer对象blobBlob对象documentDocumnet对象jsonJavaScript object, parsed from a JSON string returned by the servertextDOMString

实例 返回值不同情况的处理方式，举例如下：

①、请求设置为 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 }