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

问题：调用后台图片接口，后台返回二进制流图片数据格式。前端接收到流后处理数据显示在img标签。

解决：

1、设置axios接收参数格式为"arraybuffer"：

responseType: 'arraybuffer'

2、转换为base64格式图片数据在img标签显示：

return'data:image/png;base64,'+btoa(newUint8Array(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(newBlob([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对象，然后进行判断

代码如下

asyncdownloadFile(file){let res =awaitthis.$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 =newTextDecoder('utf-8')
        res =JSON.parse(enc.decode(newUint8Array(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 =newBlob([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对象，然后进行判断

代码如下

asyncdownloadFile(file){let formData =newFormData();
      formData.append("allTradesExcelFile", file);let res =awaitthis.$axios.post(this.API.order.tradeImpExcle, formData,{responseType:"blob"});if(!res)return;let r =newFileReader()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 =newBlob([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}