后端直接返回一个图片对象,前端如何接收并显示在图片上

1.在axios分装时根据url判断将请求的响应格式改为‘blob’格式,axios默认为json
// 请求拦截器
request.interceptors.request.use(
    (config) => {
        const tokenStr = sessionStorage.getItem("token");
        if (tokenStr) {
            config.headers.token = tokenStr;
        }
        // 判断url改变响应数据格式
        if (config.url === '/user/image_code') {
            config.responseType = 'blob'
        }
        return config; // 返回这个配置对象,如果没有返回,这个请求就不会发送出去
    },
    (error) => {
        return Promise.reject(error);
    }
)
2. 在使用时
    async imageCode() {
      //接收后端接口返回
      const result = await getImageCode()
      //接收后转为blob对象  
      let blob = new Blob([result.data], {type: "image/png"});
      //转换为url对象
      let url = window.URL.createObjectURL(blob);
      this.imageUrl = url;
    },

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值