[英]JavaScript- Base64: How To Fetch a List of URLs From an array And Convert Them To Base64?
[英]How to return base64 data from a fetch promise?
我想将图像从URL转换为base 64,并将其存储在状态中以备后用。
如何从fetch()返回数据?
我可以使用CORS安全图片和HTML画布来使其正常工作,但这不适用于公共领域。
openImage = (index) => {
const url = formatURLs[index];
const base64 = this.getBase64Image(url);
this.setState(prevState => ({
currentImage: index,
currentImagebase64: base64
}));
}
getBase64Image(url) {
fetch(url).then(r => r.blob()).then(blob => {
var reader = new FileReader();
reader.onload = function() {
var b64 = reader.result.replace(/^data:.+;base64,/, '');
return b64;
};
reader.readAsDataURL(blob);
});
}
当我console.log(reader.result)时,它将按预期输出base64。
但是,当我返回b64时,它将以“未定义”的形式返回到openImage。
getBase64Image是异步的,因此当以同步方式调用它时,它将返回未定义。
你可以尝试这样的事情
openImage = async (index) => { const url = formatURLs[index]; const base64 = await this.getBase64Image(url); this.setState(prevState => ({ currentImage: index, currentImagebase64: base64 })); } async getBase64Image(url) => { const response = await fetch(url); const blob = await response.blob(); const reader = new FileReader(); await new Promise((resolve, reject) => { reader.onload = resolve; reader.onerror = reject; reader.readAsDataURL(blob); }); return reader.result.replace(/^data:.+;base64,/, '') }
您必须在.then()内部设置状态
getBase64Image(url) {
fetch(url).then(r => r.blob()).then(blob => {
var reader = new FileReader();
reader.onload = function() {
var b64 = reader.result.replace(/^data:.+;base64,/, '');
this.setState({
currentImagebase64: b64
});
};
reader.readAsDataURL(blob);
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.