React Native：照片无法上传到 Firebase？
React Native: Photo Won't Upload to Firebase?
我正在创建一个 React Native IOS 应用程序，并且主要遵循 this tutorial 并进行了一些更改。该应用程序应通过从您的图库中选择一张图片来运行，显示该图片，您按下上传图片，进度条会跟踪上传进度，完成后会提醒您照片已上传到 firebase。
我已经达到了上述所有解释都正常工作的地步，除了在检查照片是否已上传之后……还没有。
这是我的文件设置：
这是我的 UploadScreen.js 文件：
import * as React from 'react';
import {useState} from 'react';
import {
View,
SafeAreaView,
Text,
TouchableOpacity,
StyleSheet,
Platform,
Alert,
Image,
} from 'react-native';
import * as ImagePicker from 'react-native-image-picker';
import storage from '@react-native-firebase/storage';
import * as Progress from 'react-native-progress';
import {firebase} from '@react-native-firebase/storage';
export default function UploadScreen() {
const [image, setImage] = useState('');
const [uploading, setUploading] = useState(false);
const [transferred, setTransferred] = useState(0);
const selectImage = () => {
const options = {
maxWidth: 2000,
maxHeight: 2000,
storageOptions: {
skipBackup: true,
path: 'images',
},
};
ImagePicker.launchImageLibrary(options, 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 {
const source = {uri: response?.uri};
console.log(source);
setImage(source);
}
});
};
const uploadImage = async () => {
const {uri} = image;
let task; // Add this
if (uri) {
const filename = uri.substring(uri.lastIndexOf('/') + 1);
const uploadUri =
Platform.OS === 'ios' ? uri.replace('file://', '') : uri;
setUploading(true);
setTransferred(0);
task = storage().ref(filename).putFile(uploadUri); // Remove const here
// 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!',
);
setImage('');
};
return (
<SafeAreaView style={styles.container}>
<TouchableOpacity style={styles.selectButton} onPress={selectImage}>
<Text style={styles.buttonText}>Pick an image</Text>
</TouchableOpacity>
<View style={styles.imageContainer}>
{image !== '' && image !== undefined && (
<Image source={{uri: image?.uri}} style={styles.imageBox} />
)}
{uploading ? (
<View style={styles.progressBarContainer}>
<Progress.Bar progress={transferred} width={300} />
</View>
) : (
<TouchableOpacity style={styles.uploadButton} onPress={uploadImage}>
<Text style={styles.buttonText}>Upload image</Text>
</TouchableOpacity>
)}
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
backgroundColor: '#bbded6',
},
selectButton: {
borderRadius: 5,
width: 150,
height: 50,
backgroundColor: '#8ac6d1',
alignItems: 'center',
justifyContent: 'center',
},
selectButton2: {
borderRadius: 5,
width: 150,
height: 50,
backgroundColor: '#8ac6d1',
alignItems: 'center',
justifyContent: 'center',
marginTop: 20,
},
uploadButton: {
borderRadius: 5,
width: 150,
height: 50,
backgroundColor: '#ffb6b9',
alignItems: 'center',
justifyContent: 'center',
marginTop: 20,
},
buttonText: {
color: 'white',
fontSize: 18,
fontWeight: 'bold',
},
imageContainer: {
marginTop: 30,
marginBottom: 50,
alignItems: 'center',
},
progressBarContainer: {
marginTop: 20,
},
imageBox: {
width: 300,
height: 300,
},
});
当我 运行 我的 phone 上的应用程序使用 Xcode 这是终端中 Metro 的输出：
这是来自 Xcode 的 'All Output':
2021-08-04 00:24:21.254981+0100 uploadStorageDemo[16867:5487225] 8.4.0 - [Firebase/Core][I-COR000003] The default Firebase app has not yet been configured. Add `FirebaseApp.configure()` to your application initialization. This can be done in in the App Delegate's application(_:didFinishLaunchingWithOptions:)` (or the `@main` struct's initializer in SwiftUI). Read more: https://firebase.google.com/docs/ios/setup#initialize_firebase_in_your_app.
flipper: FlipperClient::addPlugin Inspector
flipper: FlipperClient::addPlugin Preferences
flipper: FlipperClient::addPlugin React
flipper: FlipperClient::addPlugin Network
2021-08-04 00:24:22.045534+0100 uploadStorageDemo[16867:5487224] [connection] nw_endpoint_handler_set_adaptive_read_handler [C1 192.168.0.31:8081 ready channel-flow (satisfied (Path is satisfied), viable, interface: en0, ipv4, dns)] unregister notification for read_timeout failed
2021-08-04 00:24:22.045575+0100 uploadStorageDemo[16867:5487224] [connection] nw_endpoint_handler_set_adaptive_write_handler [C1 192.168.0.31:8081 ready channel-flow (satisfied (Path is satisfied), viable, interface: en0, ipv4, dns)] unregister notification for write_timeout failed
2021-08-04 00:24:22.064443+0100 uploadStorageDemo[16867:5487072] [native] Running application uploadStorageDemo ({
initialProps = {
};
rootTag = 1;
})
2021-08-04 00:24:22.075292+0100 uploadStorageDemo[16867:5487227] [connection] nw_endpoint_handler_set_adaptive_read_handler [C2 192.168.0.31:8081 ready channel-flow (satisfied (Path is satisfied), viable, interface: en0, ipv4, dns)] unregister notification for read_timeout failed
2021-08-04 00:24:22.075324+0100 uploadStorageDemo[16867:5487227] [connection] nw_endpoint_handler_set_adaptive_write_handler [C2 192.168.0.31:8081 ready channel-flow (satisfied (Path is satisfied), viable, interface: en0, ipv4, dns)] unregister notification for write_timeout failed
2021-08-04 00:24:22.162117+0100 uploadStorageDemo[16867:5487223] [connection] nw_endpoint_handler_set_adaptive_read_handler [C3 192.168.0.31:8081 ready socket-flow (satisfied (Path is satisfied), viable, interface: en0, ipv4, dns)] unregister notification for read_timeout failed
2021-08-04 00:24:22.162165+0100 uploadStorageDemo[16867:5487223] [connection] nw_endpoint_handler_set_adaptive_write_handler [C3 192.168.0.31:8081 ready socket-flow (satisfied (Path is satisfied), viable, interface: en0, ipv4, dns)] unregister notification for write_timeout failed
2021-08-04 00:24:22.162328+0100 uploadStorageDemo[16867:5487223] [connection] nw_endpoint_handler_set_adaptive_read_handler [C4 192.168.0.31:8081 ready socket-flow (satisfied (Path is satisfied), viable, interface: en0, ipv4, dns)] unregister notification for read_timeout failed
2021-08-04 00:24:22.162448+0100 uploadStorageDemo[16867:5487223] [connection] nw_endpoint_handler_set_adaptive_write_handler [C4 192.168.0.31:8081 ready socket-flow (satisfied (Path is satisfied), viable, interface: en0, ipv4, dns)] unregister notification for write_timeout failed
2021-08-04 00:24:22.621103+0100 uploadStorageDemo[16867:5487237] [javascript] Running "uploadStorageDemo" with {"rootTag":1,"initialProps":{}}
2021-08-04 00:24:22.629095+0100 uploadStorageDemo[16867:5487227] [connection] nw_socket_handle_socket_event [C5:1] Socket SO_ERROR [61: Connection refused]
2021-08-04 00:24:22.629688+0100 uploadStorageDemo[16867:5487228] [connection] nw_connection_get_connected_socket [C5] Client called nw_connection_get_connected_socket on unconnected nw_connection
2021-08-04 00:24:22.629720+0100 uploadStorageDemo[16867:5487228] TCP Conn 0x281478dc0 Failed : error 0:61 [61]
2021-08-04 00:24:22.652804+0100 uploadStorageDemo[16867:5487228] [connection] nw_endpoint_handler_set_adaptive_read_handler [C6 192.168.0.31:8081 ready socket-flow (satisfied (Path is satisfied), viable, interface: en0, ipv4, dns)] unregister notification for read_timeout failed
2021-08-04 00:24:22.652836+0100 uploadStorageDemo[16867:5487228] [connection] nw_endpoint_handler_set_adaptive_write_handler [C6 192.168.0.31:8081 ready socket-flow (satisfied (Path is satisfied), viable, interface: en0, ipv4, dns)] unregister notification for write_timeout failed
2021-08-04 00:24:43.124938+0100 uploadStorageDemo[16867:5487225] [default] [ERROR] Could not create a bookmark: NSError: Cocoa 257 "The file couldn’t be opened because you don’t have permission to view it." }
2021-08-04 00:24:43.507605+0100 uploadStorageDemo[16867:5487237] [javascript] { uri: 'file:///var/mobile/Containers/Data/Application/3E0DE5DE-38BA-43C2-B63D-B937EC1175D3/tmp/8C4CF4D2-51DF-4064-A754-21979A6167CD.jpg' }
2021-08-04 00:24:46.603236+0100 uploadStorageDemo[16867:5487224] Setting emulator - host (null) port 0
2021-08-04 00:24:46.701265+0100 uploadStorageDemo[16867:5487224] [connection] nw_endpoint_handler_set_adaptive_read_handler [C7.1 216.58.213.10:443 ready channel-flow (satisfied (Path is satisfied), viable, interface: en0, ipv4, dns)] unregister notification for read_timeout failed
2021-08-04 00:24:46.701300+0100 uploadStorageDemo[16867:5487224] [connection] nw_endpoint_handler_set_adaptive_write_handler [C7.1 216.58.213.10:443 ready channel-flow (satisfied (Path is satisfied), viable, interface: en0, ipv4, dns)] unregister notification for write_timeout failed
2021-08-04 00:24:48.329172+0100 uploadStorageDemo[16867:5487224] BackgroundSession <4A4B90EE-3A20-412D-9888-93329B680CB9> connection to background transfer daemon invalidated
我注意到第一行提到 Firebase 未配置，但是我使用 Xcode 将 'GoogleService-Info.plist' 添加到项目中并且 Bundle Identifier 名称匹配，所以我没有确定我还错过了什么......（按照开头链接的教程）。
最后，这些是我的 Firebase 存储规则：
我是 React Native 的新手，之前从未使用过 firebase，除了这个项目之外，我对出了什么问题有点迷茫……任何帮助将不胜感激！谢谢。
P.S。如果有必要，我非常乐意提供更多信息，请告诉我:)
我要说的是确保你正在检查正确的数据库 xD
我在使用相同的功能时遇到了同样的问题，我已经尝试解决了好几天。
为了解决这个问题，我在 firebase 中配置了匿名登录，安装了包并导入了@react-native-firebase/auth，然后在 .putFile() 中我传递了 uri，没有任何更改。
它在 iPhone APP 上运行完美。
会是这样的：
import auth from '@react-native-firebase/auth';
const uploadImage = async () => {
await auth()
.signInAnonymously()
.then(() => {
setLoading(true);
console.log('user logged in anonymously.');
})
.catch((error) => {
if (error.code === 'auth/operation-not-allowed') {
console.log('Enable anonymous in your firebase console.');
}
console.error(error);
});
const {uri} = image;
let task;
if (uri) {
const filename = uri.substring(uri.lastIndexOf('/') + 1);
const uploadUri = uri;
setUploading(true);
setTransferred(0);
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!',
);
setImage('');
};
原谅我的英语。我是巴西人，英语不流利。
我正在创建一个 React Native IOS 应用程序，并且主要遵循 this tutorial 并进行了一些更改。该应用程序应通过从您的图库中选择一张图片来运行，显示该图片，您按下上传图片，进度条会跟踪上传进度，完成后会提醒您照片已上传到 firebase。
我已经达到了上述所有解释都正常工作的地步，除了在检查照片是否已上传之后……还没有。
这是我的文件设置：
这是我的 UploadScreen.js 文件：
import * as React from 'react';
import {useState} from 'react';
import {
View,
SafeAreaView,
Text,
TouchableOpacity,
StyleSheet,
Platform,
Alert,
Image,
} from 'react-native';
import * as ImagePicker from 'react-native-image-picker';
import storage from '@react-native-firebase/storage';
import * as Progress from 'react-native-progress';
import {firebase} from '@react-native-firebase/storage';
export default function UploadScreen() {
const [image, setImage] = useState('');
const [uploading, setUploading] = useState(false);
const [transferred, setTransferred] = useState(0);
const selectImage = () => {
const options = {
maxWidth: 2000,
maxHeight: 2000,
storageOptions: {
skipBackup: true,
path: 'images',
},
};
ImagePicker.launchImageLibrary(options, 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 {
const source = {uri: response?.uri};
console.log(source);
setImage(source);
}
});
};
const uploadImage = async () => {
const {uri} = image;
let task; // Add this
if (uri) {
const filename = uri.substring(uri.lastIndexOf('/') + 1);
const uploadUri =
Platform.OS === 'ios' ? uri.replace('file://', '') : uri;
setUploading(true);
setTransferred(0);
task = storage().ref(filename).putFile(uploadUri); // Remove const here
// 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!',
);
setImage('');
};
return (
<SafeAreaView style={styles.container}>
<TouchableOpacity style={styles.selectButton} onPress={selectImage}>
<Text style={styles.buttonText}>Pick an image</Text>
</TouchableOpacity>
<View style={styles.imageContainer}>
{image !== '' && image !== undefined && (
<Image source={{uri: image?.uri}} style={styles.imageBox} />
)}
{uploading ? (
<View style={styles.progressBarContainer}>
<Progress.Bar progress={transferred} width={300} />
</View>
) : (
<TouchableOpacity style={styles.uploadButton} onPress={uploadImage}>
<Text style={styles.buttonText}>Upload image</Text>
</TouchableOpacity>
)}
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
backgroundColor: '#bbded6',
},
selectButton: {
borderRadius: 5,
width: 150,
height: 50,
backgroundColor: '#8ac6d1',
alignItems: 'center',
justifyContent: 'center',
},
selectButton2: {
borderRadius: 5,
width: 150,
height: 50,
backgroundColor: '#8ac6d1',
alignItems: 'center',
justifyContent: 'center',
marginTop: 20,
},
uploadButton: {
borderRadius: 5,
width: 150,
height: 50,
backgroundColor: '#ffb6b9',
alignItems: 'center',
justifyContent: 'center',
marginTop: 20,
},
buttonText: {
color: 'white',
fontSize: 18,
fontWeight: 'bold',
},
imageContainer: {
marginTop: 30,
marginBottom: 50,
alignItems: 'center',
},
progressBarContainer: {
marginTop: 20,
},
imageBox: {
width: 300,
height: 300,
},
});
当我 运行 我的 phone 上的应用程序使用 Xcode 这是终端中 Metro 的输出：
这是来自 Xcode 的 'All Output':
2021-08-04 00:24:21.254981+0100 uploadStorageDemo[16867:5487225] 8.4.0 - [Firebase/Core][I-COR000003] The default Firebase app has not yet been configured. Add `FirebaseApp.configure()` to your application initialization. This can be done in in the App Delegate's application(_:didFinishLaunchingWithOptions:)` (or the `@main` struct's initializer in SwiftUI). Read more: https://firebase.google.com/docs/ios/setup#initialize_firebase_in_your_app.
flipper: FlipperClient::addPlugin Inspector
flipper: FlipperClient::addPlugin Preferences
flipper: FlipperClient::addPlugin React
flipper: FlipperClient::addPlugin Network
2021-08-04 00:24:22.045534+0100 uploadStorageDemo[16867:5487224] [connection] nw_endpoint_handler_set_adaptive_read_handler [C1 192.168.0.31:8081 ready channel-flow (satisfied (Path is satisfied), viable, interface: en0, ipv4, dns)] unregister notification for read_timeout failed
2021-08-04 00:24:22.045575+0100 uploadStorageDemo[16867:5487224] [connection] nw_endpoint_handler_set_adaptive_write_handler [C1 192.168.0.31:8081 ready channel-flow (satisfied (Path is satisfied), viable, interface: en0, ipv4, dns)] unregister notification for write_timeout failed
2021-08-04 00:24:22.064443+0100 uploadStorageDemo[16867:5487072] [native] Running application uploadStorageDemo ({
initialProps = {
};
rootTag = 1;
})
2021-08-04 00:24:22.075292+0100 uploadStorageDemo[16867:5487227] [connection] nw_endpoint_handler_set_adaptive_read_handler [C2 192.168.0.31:8081 ready channel-flow (satisfied (Path is satisfied), viable, interface: en0, ipv4, dns)] unregister notification for read_timeout failed
2021-08-04 00:24:22.075324+0100 uploadStorageDemo[16867:5487227] [connection] nw_endpoint_handler_set_adaptive_write_handler [C2 192.168.0.31:8081 ready channel-flow (satisfied (Path is satisfied), viable, interface: en0, ipv4, dns)] unregister notification for write_timeout failed
2021-08-04 00:24:22.162117+0100 uploadStorageDemo[16867:5487223] [connection] nw_endpoint_handler_set_adaptive_read_handler [C3 192.168.0.31:8081 ready socket-flow (satisfied (Path is satisfied), viable, interface: en0, ipv4, dns)] unregister notification for read_timeout failed
2021-08-04 00:24:22.162165+0100 uploadStorageDemo[16867:5487223] [connection] nw_endpoint_handler_set_adaptive_write_handler [C3 192.168.0.31:8081 ready socket-flow (satisfied (Path is satisfied), viable, interface: en0, ipv4, dns)] unregister notification for write_timeout failed
2021-08-04 00:24:22.162328+0100 uploadStorageDemo[16867:5487223] [connection] nw_endpoint_handler_set_adaptive_read_handler [C4 192.168.0.31:8081 ready socket-flow (satisfied (Path is satisfied), viable, interface: en0, ipv4, dns)] unregister notification for read_timeout failed
2021-08-04 00:24:22.162448+0100 uploadStorageDemo[16867:5487223] [connection] nw_endpoint_handler_set_adaptive_write_handler [C4 192.168.0.31:8081 ready socket-flow (satisfied (Path is satisfied), viable, interface: en0, ipv4, dns)] unregister notification for write_timeout failed
2021-08-04 00:24:22.621103+0100 uploadStorageDemo[16867:5487237] [javascript] Running "uploadStorageDemo" with {"rootTag":1,"initialProps":{}}
2021-08-04 00:24:22.629095+0100 uploadStorageDemo[16867:5487227] [connection] nw_socket_handle_socket_event [C5:1] Socket SO_ERROR [61: Connection refused]
2021-08-04 00:24:22.629688+0100 uploadStorageDemo[16867:5487228] [connection] nw_connection_get_connected_socket [C5] Client called nw_connection_get_connected_socket on unconnected nw_connection
2021-08-04 00:24:22.629720+0100 uploadStorageDemo[16867:5487228] TCP Conn 0x281478dc0 Failed : error 0:61 [61]
2021-08-04 00:24:22.652804+0100 uploadStorageDemo[16867:5487228] [connection] nw_endpoint_handler_set_adaptive_read_handler [C6 192.168.0.31:8081 ready socket-flow (satisfied (Path is satisfied), viable, interface: en0, ipv4, dns)] unregister notification for read_timeout failed
2021-08-04 00:24:22.652836+0100 uploadStorageDemo[16867:5487228] [connection] nw_endpoint_handler_set_adaptive_write_handler [C6 192.168.0.31:8081 ready socket-flow (satisfied (Path is satisfied), viable, interface: en0, ipv4, dns)] unregister notification for write_timeout failed
2021-08-04 00:24:43.124938+0100 uploadStorageDemo[16867:5487225] [default] [ERROR] Could not create a bookmark: NSError: Cocoa 257 "The file couldn’t be opened because you don’t have permission to view it." }
2021-08-04 00:24:43.507605+0100 uploadStorageDemo[16867:5487237] [javascript] { uri: 'file:///var/mobile/Containers/Data/Application/3E0DE5DE-38BA-43C2-B63D-B937EC1175D3/tmp/8C4CF4D2-51DF-4064-A754-21979A6167CD.jpg' }
2021-08-04 00:24:46.603236+0100 uploadStorageDemo[16867:5487224] Setting emulator - host (null) port 0
2021-08-04 00:24:46.701265+0100 uploadStorageDemo[16867:5487224] [connection] nw_endpoint_handler_set_adaptive_read_handler [C7.1 216.58.213.10:443 ready channel-flow (satisfied (Path is satisfied), viable, interface: en0, ipv4, dns)] unregister notification for read_timeout failed
2021-08-04 00:24:46.701300+0100 uploadStorageDemo[16867:5487224] [connection] nw_endpoint_handler_set_adaptive_write_handler [C7.1 216.58.213.10:443 ready channel-flow (satisfied (Path is satisfied), viable, interface: en0, ipv4, dns)] unregister notification for write_timeout failed
2021-08-04 00:24:48.329172+0100 uploadStorageDemo[16867:5487224] BackgroundSession <4A4B90EE-3A20-412D-9888-93329B680CB9> connection to background transfer daemon invalidated
我注意到第一行提到 Firebase 未配置，但是我使用 Xcode 将 'GoogleService-Info.plist' 添加到项目中并且 Bundle Identifier 名称匹配，所以我没有确定我还错过了什么......（按照开头链接的教程）。
最后，这些是我的 Firebase 存储规则：
我是 React Native 的新手，之前从未使用过 firebase，除了这个项目之外，我对出了什么问题有点迷茫……任何帮助将不胜感激！谢谢。
P.S。如果有必要，我非常乐意提供更多信息，请告诉我:)
我要说的是确保你正在检查正确的数据库 xD
我在使用相同的功能时遇到了同样的问题，我已经尝试解决了好几天。
为了解决这个问题，我在 firebase 中配置了匿名登录，安装了包并导入了@react-native-firebase/auth，然后在 .putFile() 中我传递了 uri，没有任何更改。
它在 iPhone APP 上运行完美。
会是这样的：
import auth from '@react-native-firebase/auth';
const uploadImage = async () => {
await auth()
.signInAnonymously()
.then(() => {
setLoading(true);
console.log('user logged in anonymously.');
})
.catch((error) => {
if (error.code === 'auth/operation-not-allowed') {
console.log('Enable anonymous in your firebase console.');
}
console.error(error);
});
const {uri} = image;
let task;
if (uri) {
const filename = uri.substring(uri.lastIndexOf('/') + 1);
const uploadUri = uri;
setUploading(true);
setTransferred(0);
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!',
);
setImage('');
};
原谅我的英语。我是巴西人，英语不流利。