前台如何渲染后台传递过来的base64数据

当得到的base64数据是图片类型数据时

怎么判断当前的base64数据类型是图片呢

使用 JavaScript 的内置函数或相关库来解码 Base64 数据。例如，可以使用 atob() 函数来进行解码。
let base64Data = "your_base64_encoded_data";
let decodedData = atob(base64Data);
如果解码出来的数据里面包含png,jpg之类的文字代表是图片类型

接下来可以把解码后的数据使用new Blob转换成Blob数据类型,转换成Blob数据类型之后就方便处理了一点.

<script>
  let btn2 = document.querySelector(".btn2");
  btn2.addEventListener("click", function () {
    axios.get("http://127.0.0.1:3001/blob").then((res) => {
      console.log(res.data.data);
      let base64Data = res.data.data;
      let decoded = atob(base64Data);
      let imageBlob = new Blob(
        [new Uint8Array(decoded.split("").map((char) => char.charCodeAt(0)))],
        { type: "application/octet-stream" }
      );
      console.log("imageBlob", imageBlob);
      let url = URL.createObjectURL(imageBlob);
      let img = document.createElement("img");
      img.src = url;
      document.body.appendChild(img);
    });
  });
</script>

后台返回base64数据不是一个好选择,后台直接返回Blob类型的数据是最好的选择.

原文地址：https://blog.csdn.net/qq_42294411/article/details/140630836

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！