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

最新推荐文章于 2021-02-04 19:51:39 发布

原创最新推荐文章于 2021-02-04 19:51:39 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

bug 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种获取二进制文件流的方法，并演示了如何将返回的ArrayBuffer转换为BlobURL，以便在Web环境中预览或下载图片。通过Promise处理异步请求，确保了流程的流畅性和用户体验。

一、获取文件流

/**
 * 获取二进制文件流
 * @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
        }
      });