我尝试在 iOS 上使用 React Native 将“base64”图像上传到 Firebase。但是当我尝试上传图片时,出现以下错误:
<块引用>undefined 不是一个对象(评估 'uri.substring')
我使用 route.params
获取我的图像,如果我在这样的视图中显示图像,就会显示图像。
<Image style={styles.image} source={{ uri: `data:image/png;base64,${myImage}` }}/>
如果图像是“base64”,我还应该做什么吗?我还应该做什么?
这是我的代码:
// Here is how I get the image
const { myImage } = props.route.params;
const uploadImage = async () => {
const {uri} = myImage;
const filename = uri.substring(uri.lastIndexOf('/') + 1);
const uploadUri = Platform.OS === 'ios' ? uri.replace('file://', '') : uri;
setUploading(true);
setTransferred(0);
const task = storage()
.ref(filename)
.putFile(uploadUri);
// set progress state
task.on('state_changed', snapshot => {
setTransferred(
Math.round(snapshot.bytesTransferred / snapshot.totalBytes) * 10000
);
});
try {
await task;
} catch (e) {
console.error(e);
}
setUploading(false);
Alert.alert(
'Photo uploaded!',
'Your photo has been uploaded to Firebase Cloud Storage!'
);
};
答案 0 :(得分:1)
看你现在的代码,你从myImage
中取出props.route.params
,这是一串Base 64字符对应的PNG图片(比如iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAMSURBVBhXY/j//z8ABf4C/qc1gYQAAAAASUVORK5CYII=
——单个 #FFFFFF 像素的 PNG)。
const { myImage } = props.route.params;
在此之下,您尝试从此 uri
字符串中获取属性 myImage
。由于此属性不存在,您将获得 undefined
。然后,此 uri = undefined
值会在下一行引发错误。
const { uri } = myImage; // uri is undefined! ("".uri === undefined)
const filename = uri.substring(uri.lastIndexOf('/') + 1); // throws error!
上传数据 URL 的正确方法是使用 Reference#putString()
中介绍的 documentation here 方法。
将此应用于您的代码,您将使用:
const { myImage } = props.route.params;
const uploadImage = async () => {
const dataUrl = `data:image/png;base64,${myImage}`;
// you could use a Firestore Doc ID, a RTDB Push ID or
// some `uuid` implementation to generate a suitable filename.
const storageRef = storage()
.ref(/* provide a path for the image */);
const uploadTask = storageRef
.putString(dataUrl, 'data_url');
uploadTask.on('state_changed', snapshot => {
setTransferred(
Math.round(snapshot.bytesTransferred / snapshot.totalBytes) * 10000
);
});
try {
await uploadTask;
setUploading(false);
Alert.alert(
'Photo uploaded!',
'Your photo has been uploaded to Firebase Cloud Storage!'
);
} catch (err) {
// TODO: Check value of `err.code` and handle appropriately.
console.error('Upload failed: ', err);
Alert.alert(
'Photo upload failed!',
'Your photo didn\'t upload properly!'
);
}
}
为了防止覆盖其他人的数据并使安全规则更容易实施,您应该在上传的文件前添加类似于以下内容的用户 ID:
const storageRef = storage()
.ref('userUploads')
.child(firebase.auth().currentUser.uid)
.child(/* generated image ID */);
// builds a reference to /userUploads/someUserId/someImageId