嘿,我一直在使用 React Native + Firebase auth/storage/realtimedb 构建一个全栈 Tinder 应用程序。
到目前为止,一切都很顺利,但几天前我遇到了一个问题,我不知道出了什么问题。
我取回图像的正确 uri,并将其作为参数传递给我的 uploadImage 函数,并将其转换为 blob。它将文件上传到 firebase 存储,但这不是我的图像。这是上传的内容:
Image that is getting uploaded.
Weird things going on in the file description of my 'image'
我注意到的第一件事是,当我上传图像并查看假定图像的描述时,我发现大小为 600,000 字节,这很奇怪,因为当我通过 firebase 存储控制台手动上传图片时,它们是一些兆字节。
第二件事是图像预览不起作用。
editAvi = async () => {
console.log('wtf')
await Permissions.askAsync(Permissions.CAMERA_ROLL);
const { cancelled, uri } = await ImagePicker.launchImageLibraryAsync({
allowsEditing: true,
});
if (!cancelled) {
this.setState({ image: uri });
}
console.log('The image is' + this.state.image)
};
uploadImage = async (uri, imageName) => {
// Create file metadata including the content type
var metadata = {
contentType: 'image/jpeg',
}
// Points to the root reference
var storageRef = firebase.storage().ref();
// Points to 'images'
const response = await fetch(uri);
const blob = await response.blob();
var ref = storageRef.child('images/' + this.state.currentID);
ref.put(uri, metadata);
console.log('This is the blob: ' + blob)
}
我已经对此进行了两天的广泛研究,并在我所处的网络开发不和谐中多次询问过它,但我仍然无法修复它。
请帮我解决这个问题!这是我完成这个应用程序需要做的最后的事情之一。 :)
最佳答案
我也在寻找答案时发现了这个问题。我按照 Github 问题 https://github.com/expo/expo/issues/2402#issuecomment-443726662 的建议解决了这个问题
主要思想是替换
const response = await fetch(uri);
const blob = await response.blob();
var ref = storageRef.child('images/' + this.state.currentID);
ref.put(uri, metadata);
与
const blob = await new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.onload = () => {
resolve(xhr.response);
};
xhr.onerror = (e) => {
reject(new TypeError("Network request failed"));
};
xhr.responseType = "blob";
xhr.open("GET", uri, true);
xhr.send(null);
});
var ref = storageRef.child('images/' + this.state.currentID);
ref.put(blob, metadata);
获取知道在使用 Expo 时 ReacNative 出现问题。
希望这能解决这个问题。
关于reactjs - 上传到 Firebase 存储执行,但图像返回为黑色方 block 。尝试了一切,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54575927/