如何解决Firebase云存储错误加载预览上传的图像
我使用react-native-image-picker的base64生成的数据上传了一张图像。它可以很好地显示在Firebase控制台上,但是当我尝试在浏览器中查看它时,它显示“ Error Loading Preview”,当我单击它时,它只是一个黑框。查看下面的屏幕截图
const uploadImage = async ({data,filename,uri}) => {
const ext = uri.split('.').pop();
const name = uri.split('/').pop();
const path = `${user.uid}_${name}`;
const storageRef = firebase.storage().ref(`profiles/${path}`);
storageRef
.putString(data,'base64',{contentType: `image/${ext}`})
.then(function (snapshot) {
console.log('SUCCESSSSS');
});
};
useEffect(() => {
ImagePicker.showImagePicker((response) => {
//console.log('Response = ',response);
if (response.didCancel) {
console.log('User cancelled image picker');
} else if (response.error) {
console.log('ImagePicker Error: ',response.error);
} else if (response.customButton) {
console.log('User tapped custom button: ',response.customButton);
} else {
console.log(response.uri);
uploadImage(response);
setAvatar({uri: response.uri});
}
});
},[]);
编辑:我将base64字符串复制到一个在线转换器中,看起来不错,它返回了正确的图像。因此,数据看起来没有问题。 Firebase处理它的方式出了点问题。
编辑:我尝试将类型明确设置为image / jpeg,而不是此处所述的image / jpg:Proper way to show image when Firestorage is down or Error loading preview in Firestorage for iOS,但没有区别。
解决方法
似乎Firebase的base64 putString方法和react-native涉及多个错误:请参见此线程:https://github.com/firebase/firebase-js-sdk/issues/576。我遵循了yonahforst的回答,最终改为使用blob。效果很好。
在此处复制以防线程消失:
function urlToBlob(url) {
return new Promise((resolve,reject) => {
var xhr = new XMLHttpRequest();
xhr.onerror = reject;
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
resolve(xhr.response);
}
};
xhr.open('GET',url);
xhr.responseType = 'blob'; // convert type
xhr.send();
})
}
如果不存在,请确保添加“ data:image / jpeg; base64,9asdf92349 ...”。我当时使用的是react-native-image-picker,所以没有开箱即用的功能。
const dataURL = 'data:image/jpeg;base64,' + data;
urlToBlob(dataURL).then((blob) => {
storageRef
.put(blob)
.then(function (snapshot) {
const downloadURL = snapshot.ref.getDownloadURL().then((link) => {
console.log('link: ',link);
user.updateProfile({photoURL: link});
});
})
.then(() => console.log('SUCCESS'));
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。