axios获取二进制图片并显示在img标签

一、获取文件流

/**
 * 获取二进制文件流
 * @param {string} url 系统API
 * @param {object} param 参数
 * @param {boolean} showcode msg提示
 * @param {boolean} layout 加载层
 */
const buffer=(url, param, showcode = false, layout = false)=>{
  let load=new loading(wuConfig.timeout);
  load.openLoading(layout)

  return new Promise((resolve, reject) => {
    apiInstance({
      method: "get",
      url: url,
      data: param,
      responseType: "arraybuffer"
    }).then(res=>{
      // if (res.headers["content-type"] === "application/json;charset=UTF-8") {
      //   let uint8 = new Uint8Array(res.data); // 提取uint8Array
      //   let resToString = JSON.parse(
      //     decodeURIComponent(escape(String.fromCharCode(...uint8)))
      //   ); // 解决乱码
      //   load.closeLoading();
      //   load.showcode(resToString.code,resToString.message,showcode)
      //   resolve(res);
      // } else {
      //   resolve(res);
      // }
      resolve(res);
    }).catch(err=>{
      reject(err);
    })
  })
}

二、转换blobURL

buffer("/api/img", {}, false,true).then(res => {
        if (res.status == 200) {
          let blob = new Blob([res.data], { type: "image/png" });
          let imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
          console.log(imageUrl);//img url
        }
      });

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue中,我们可以使用axios库来进行HTTP请求,包括获取post请求的二进制流数据。下面是一个示例代码,演示如何使用axios获取post请求中的二进制流数据。 ```javascript // 引入axios库 import axios from 'axios' // 在Vue组件中定义一个方法来获取post请求的二进制流数据 methods: { getBinaryData() { axios.post('/api/getBinaryData', {}, { responseType: 'blob' // 设置响应类型为二进制流 }) .then(response => { const blobData = response.data // 对获取二进制流数据进行处理 // 例如,可以将二进制流转化为图片显示 const imageSrc = URL.createObjectURL(blobData) const imgElement = document.createElement('img') imgElement.src = imageSrc document.body.appendChild(imgElement) }) .catch(error => { console.error(error) }) } } ``` 上述代码中的`getBinaryData`方法定义了一个POST请求用于获取二进制流数据。在axios的POST请求中,我们设置了`responseType`选项为'blob',这表示返回的响应数据将以二进制流的形式接收。 在获取二进制流数据后,我们可以对其进行自定义处理。在示例代码中,我们将二进制流数据转化为图片,并将其添加到页面中进行显示。 注意,上述代码中的'/api/getBinaryData'是一个示例的请求地址,你需要将其替换为你真正的后端接口地址。另外,还可能需要根据你的具体需求进行适当的修改和扩展。 总结起来,Vue中可以使用axios库来获取post请求的二进制流数据。通过设置axios请求的`responseType`选项为'blob',可以确保响应数据以二进制流的形式接收。获取二进制流数据后,我们可以对其进行自定义处理,例如转化为图片等操作。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值