Reactjs 执行上传到Firebase存储,但图像返回为黑色方块。什么都试过了
嘿,我一直在使用react native+firebase auth/storage/realtimedb构建一个完整的tinder应用程序堆栈 到目前为止,一切都很顺利,但几天前我遇到了一个问题,我不知道这有什么问题 我获取图像的正确uri,并将其作为参数传递给uploadImage函数,然后将其转换为blob。它将文件上载到firebase存储,但它不是我的图像。这是上传的内容: 我注意到的第一件事是,当我上传图像并查看假设图像的描述时,我看到图像的大小是600000字节,这很奇怪,因为当我通过firebase存储控制台手动上传图片时,它们只有几兆字节 第二件事是图像预览不起作用Reactjs 执行上传到Firebase存储,但图像返回为黑色方块。什么都试过了,reactjs,firebase,react-native,firebase-storage,expo,Reactjs,Firebase,React Native,Firebase Storage,Expo,嘿,我一直在使用react native+firebase auth/storage/realtimedb构建一个完整的tinder应用程序堆栈 到目前为止,一切都很顺利,但几天前我遇到了一个问题,我不知道这有什么问题 我获取图像的正确uri,并将其作为参数传递给uploadImage函数,然后将其转换为blob。它将文件上载到firebase存储,但它不是我的图像。这是上传的内容: 我注意到的第一件事是,当我上传图像并查看假设图像的描述时,我看到图像的大小是600000字节,这很奇怪,因为
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)
}
我已经对此进行了两天的广泛研究,并在一次web开发冲突中多次询问此事,但我仍然无法修复它
请帮我修好这个!这是我完成此应用程序所需的最后几件事之一。:) 在我四处寻找完全相同问题的解决方案时发现了这个问题。经过大约12个小时的反复试验,我添加了“应用程序/八位字节流”;BASE64'a创建blob时的类型(使用rn fetch blob) build(数据,{type:'application/octet stream;BASE64'})
不确定您是否使用该方法创建blob,但如果是,则使用该方法作为类型为我解决了问题。在我搜索答案时发现了此问题。根据Github问题的建议,我能够解决这个问题 主要的想法是替换
const response = await fetch(uri);
const blob = await response.blob();
var ref = storageRef.child('images/' + this.state.currentID);
ref.put(uri, metadata);
与
使用Expo时,获取知道在ReacNative中有问题的信息
希望这能解决问题。我看到您将
contentType
设置为var metadata
,但是您是否向var metadata
添加了数据?好的,所以我必须添加var metadata的原因是因为之前,我的图像一直作为应用程序/八位字节流上传,这已经是一个红色标志。不确定向元数据变量添加数据是什么意思。在my metadata变量中有一个contentType:“image/jpeg”修复了应用程序/八位字节流的问题
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);