最近更新下一栈的RN版本,从0.53更到了0.54.3,然后发现之前请求图片二进制数据的代码无法使用了!
调试了很久,才发现了最终原因:
fetch
API支持了blob
数据请求,于是上个帖子React-Native使用fetch获取二进制数据中的办法自然而然失效了。
新办法
得知fetch
返回的类型支持blob
之后,我们就考虑把这个blob
数据转成base64
了,我使用的代码如下:
function LoadImage (url) {
return new Promise((RES, REJ) => {
fetch(url).then(r => r.blob()).then(blob => {
const reader = new FileReader();
reader.onload = (e) => {
const data = e.target.result;
RES(data.split('base64,')[1]);
}
reader.readAsDataURL(blob);
}).catch(REJ);
})
}
export default LoadImage;
调用方法:
LoadImage('https://nextstack.xyz/static/qrcode.png`).then(base64 => {
console.log('图片的base64编码');
})
提示:RN中的
FileReader
不支持readAsArrayBuffer
、readAsBinaryString
等数据转换,所以我们这里用readAsDataURL
网友评论