首页 > 其他分享> 文章详细

接口返回图片，前端生成临时url实现展示、下载效果

2021-11-19 12:31:49 阅读：164 来源： 互联网

标签：responseType contimg url res 前端接口 filename link blob

请求一个后端接口

返回一张图片（打印后发现是二进制流）

瞬间不开心了（为什么不能后端处理好再让前端调用呢）

不过丝毫不慌好吧

先说处理逻辑：首先要将获取到的数据转换，这边选择以blob形式进行转换

主要代码 responseType: 'blob'

window.URL.createObjectURL

话不多说，直接上代码（声明一下：这是在vue中写的，原生js及其他框架注意修改）

HTML

    <button @click="onexh()">获取</button>
    <img :src="contimg" alt="假装有图" />
    <button @click="download()"><button>下载</button></a>

JavaScript

data() {
return{
  xboUrl：“url”，       //接口地址
  contimg:"",
　filename:""
　　}
},

methods: {
 onexh() {　　　　　　//展示
      axios({       
        url: this.xboUrl, 
        method: "GET",
        params: this.params,
        responseType: "blob",     //划重点了，这个很重要
      }).then((res) => {
        console.log(res);         //打印返回结果
        let blob = new Blob([res.data], { type: "image/jpeg" });        
        this.contimg = window.URL.createObjectURL(blob);        //转换为blob格式
        console.log("转换后地址", this.contimg);
        this.filename = this.contimg.slice(50)   //这里选择对名字进行一点小处理，也可以直接赋值
      });
    },
 }

至此，展示效果实现

什么？下载？

别急，上面按钮都写了怎么可能不写方法

download(fileName = this.filename) {  //this.filename就是下载文件的名字
      let link = document.createElement("a");　　　　//生成一个a标签
      link.download = fileName || "defaultName";
      link.href = this.contimg;
      document.body.appendChild(link);
      link.click();
      // 移除
      document.body.removeChild(link);
    },

方法容易找到，其中一些小细节上最容易犯错误，比如在请求接口的时候

responseType: "blob",可以说是非常重要了（小声BB）我就是忘了把这条写进去爱心小贴士：冬天了，你有女朋友暖手了吗

标签：responseType,contimg,url,res,前端,接口,filename,link,blob
来源： https://www.cnblogs.com/tccg/p/15576620.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

接口返回图片，前端生成临时url实现展示、下载效果