axios请求参数格式（axios请求设置responseType为‘blob‘或‘arraybuffer‘下载时，正确处理返回值）

问题：调用后台图片接口    
    
   ，后台返回二进制流图片数据格式    
    
   。前端接收到流后处理数据显示在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 }