前台如何渲染后台传递过来的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）！