前端二进制流转base64 (亲测有效)
前端二进制流转base64 (亲测有效)
·
base64转二进制流在这https://mp.csdn.net/mp_blog/creation/editor/124629402
第一步:拿到二进制流
//网上随便找的图片
const url =
"https://img0.baidu.com/it/u=73689209,3130028231&fm=253&fmt=auto&app=138&f=JPEG";
axios
.get(url, {
responseType: "blob", //一定要传!!!
})
.then((res) => {
console.log(res.data, "二进制流");
});
二进制流长这样
第二步:转base64
// 二进制流转换为base64 格式。
getBase64(data) {
return new Promise((resolve, reject) => {
const blob = new Blob([data], { type: "image/jpeg" }); //类型一定要写!!!
const reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = () => resolve(reader.result);
reader.onerror = (error) => reject(error);
});
},
base64长这样
注意:
- 请求头 responseType: "blob" 一定要转。否则格式不对
-
const blob = new Blob([res.data], { type: "image/jpg" }) 的type一定要写。否则转后的base64打不开
vue完整代码。粘贴即用(没安装axios当我没说)
<template>
<div class="app"></div>
</template>
<script>
import axios from "axios";
export default {
name: "app",
data() {
return {};
},
methods: {
// 二进制流转换为base64 格式。
getBase64(data) {
const blob = new Blob([data], { type: "image/jpg" }); //类型一定要写!!!
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = () => resolve(reader.result);
reader.onerror = (error) => reject(error);
});
},
},
mounted() {
//网上随便找的图片
const url =
"https://img0.baidu.com/it/u=73689209,3130028231&fm=253&fmt=auto&app=138&f=JPEG";
axios
.get(url, {
responseType: "blob", //一定要传!!!
})
.then((res) => {
console.log(res.data, "二进制流");
this.getBase64(res.data).then((binary) => {
console.log(binary, "base64");
document.body.innerHTML = binary;
});
});
},
};
</script>
更多推荐
已为社区贡献3条内容
所有评论(0)