在 Vue 中,可以使用 axios
和 FileReader
来将在线图片链接转为 base64。
首先使用
axios
发送一个 GET 请求到指定的 URL,并将响应类型设置为 'blob'。然后,使用FileReader
将响应数据读取为 Data URL(即 base64 格式)。最后,它返回一个 Promise,该 Promise 在读取完成时解析为 base64 字符串。如果请求失败,需要后端解决跨域问题!
需要先安装 axios
:
npm install axios
使用:
methods: {
async getBase64(url) {
const response = await axios.get(url, {
responseType: 'blob'
});
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onloadend = () => resolve(reader.result);
reader.onerror = reject;
reader.readAsDataURL(response.data);
});
},
async someMethod() {
const base64 = await this.getBase64('图片链接');
console.log(base64);
}
}