当我尝试使用react-native-fetch-blob在 Firebase 存储中上传照片时遇到了这个问题！这是上传文件的代码。
uploadImage = (uri, imageName, mime = 'image/jpg') => {
return new Promise((resolve, reject) => {
const uploadUri = uri
let uploadBlob = null
const imageRef = firebase.storage().ref('posts').child(imageName)
fs.readFile(uploadUri, 'base64')
.then((data) => {
return Blob.build(data, { type: `${mime};BASE64` })
})
.then((blob) => {
uploadBlob = blob
return imageRef.put(blob, { contentType: mime })
})
.then(() => {
uploadBlob.close()
return imageRef.getDownloadURL()
})
.then((url) => {
resolve(url)
})
.catch((error) => {
reject(error)
})
})
}
这是调用函数uploadImage的代码：
this.uploadImage(this.state.avatarUri.uri, userId).then((imageURL) => {
saveDatabase(userId, imageURL)
}).catch((error) => {
this.setState({
error,
isLoading: false
})
})
avatarUri 是从 imagepicker 库中设置的，如下所示：
openCamera = () => {
ImagePicker.launchImageLibrary({}, (response) => {
if (response.didCancel) {
} else if (response.error) {
this.state.imageError = response.error
console.log('ImagePicker Error: ', this.state.imageError);
} else if (response.customButton) {
console.log('User tapped custom button: ', response.customButton);
} else {
this.setState({
avatarUri: {
uri: response.uri
},
imgPath: response.imgPath,
error: ''
});
}
});
}
错误截图在这里：
编辑 渲染功能如下：
this.state.isLoading ?
<Spinner style={{flex:1, alignSelf: 'center'}} color='blue' />
:
<Container>
<Content style={{margin:20}}>
<Item>
<Icon type="FontAwesome" active name='user' style={{ color :'#c5aa6a'}} />
<Input
placeholder='Email'
onChangeText= { (text)=> { this.setEmailText(text) } }
value={this.state.email}/>
</Item>
<Item>
<Icon type="FontAwesome" active name='key' style={{ color :'#c5aa6a'}} />
<Input
secureTextEntry
placeholder='Password'
onChangeText= { (text)=> { this.setPasswordText(text) } }
value={this.state.password}
/>
</Item>
<Item>
<Icon type="FontAwesome" active name='key' style={{ color :'#c5aa6a'}} />
<Input
secureTextEntry
placeholder='Confirm Password'
onChangeText= { (text)=> { this.setRePasswordText(text) } }
value={this.state.re_password}
/>
</Item>
<Button bordered success style={{ justifyContent: 'center', marginTop: 20}} onPress = { ()=> this.verifyCredentials() } >
<Text style={{color:'#c5aa6a'}}>Sign Up</Text>
</Button>
{
!this.state.avatarUri ?
<Icon type="FontAwesome" active name='user-circle' style={styles.photoPicker} onPress= { ()=> this.openCamera() } /> :
<Image style={styles.avatarPicked} source= { this.state.avatarUri } />
}
{
this.state.error ?
<Text style= {{ color: '#ff0000', alignSelf: 'center', marginTop: 30}}> {this.state.error} </Text>
:
null
}
</Content>
<Button transparent onPress={() => this.props.navigation.navigate('login')} style={styles.buttonStyle} >
<Text style={{color:'#c5aa6a'}}>I already have an account</Text>
</Button>
</Container>