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

请求一个后端接口

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

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

 

 

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

 

 

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

不过丝毫不慌好吧

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

先说处理逻辑:首先要将获取到的数据转换,这边选择以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)   //这里选择对名字进行一点小处理,也可以直接赋值
      });
    },
 }
至此,展示效果实现 接口返回图片,前端生成临时url实现展示、下载效果

 

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

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

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

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);
    },

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

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

responseType: "blob",可以说是非常重要了 (小声BB)我就是忘了把这条写进去   爱心小贴士 : 冬天了,你有女朋友暖手了吗   接口返回图片,前端生成临时url实现展示、下载效果

 

 

上一篇:Laravel 8 图片上传七牛云


下一篇:URLEncoder和URLDecoder