javascript - React Native:照片不会上传到 Firebase?
问题描述
我正在创建一个 react Native IOS 应用程序,并且大部分时间都按照本教程进行了一些更改。该应用程序应通过从您的库中选择图像来运行,显示图像,您按下上传图像,进度条会跟踪上传进度,完成后会提醒您照片已上传到 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,
},
});
当我使用 Xcode 在手机上运行该应用程序时,这是终端中 Metro 的输出:
这是来自 Xcode 的“所有输出”:
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”添加到项目中并且捆绑标识符名称匹配所以我不确定我还错过了什么out...(按照开头链接的教程进行操作)。
我对 React Native 还很陌生,除了这个项目之外,我从来没有使用过 firebase,所以对出了什么问题有点迷茫......任何帮助都将不胜感激!谢谢你。
PS如果有必要,我很乐意提供更多信息,请告诉我什么:)
解决方案
我要说的是确保您检查的是正确的数据库 xD
推荐阅读
- tkinter - tkinter - 修改主窗口上的图像位置
- amazon-redshift - Redshift:查询所有具有公共列的表
- amazon-web-services - 避免在 AWS Cloudwatch 中存储日志
- flask - 如何允许谷歌云中的 CORS 运行?
- javascript - Jquery 的问题 fadeIn、fadeOut、delay()、
- c++ - 在 OS Catalina 中找不到 GDB
- function - Python 虚拟助手在一段代码后无法继续。而1:
- c# - 使用 MassTransit 发送到多个 RabbitMQ 主机
- r - 安装包 e1071
- postgresql - 使用 postgres 数据库锁定并发 cron