我想将图像编码为二进制字符串,然后将其上传到Cloudinary网站。 Cloudinary配置在php(后端)中完成。但是我的图像没有上传到cloudinary网站。我在设备上收到以下警告。我使用rn-fetch-blob和react-native-image-picker。下面是我的完整代码。请帮助我。谢谢
import React, { Component } from 'react';
import { StyleSheet, Text, View, PixelRatio, TouchableOpacity, Image,
TextInput, Alert } from 'react-native';
import ImagePicker from 'react-native-image-picker';
import RNFetchBlob from 'rn-fetch-blob';
export default class ImageUpload extends Component {
constructor() {
super();
this.state = {
images:null,
data:null,
ImageLinks:[],
}
}
selectPhotoTapped() {
const options = {
quality: 1.0,
maxWidth: 500,
maxHeight: 500,
storageOptions: {
skipBackup: true
}
};
ImagePicker.showImagePicker(options, (response) => {
console.log('Response = ', response);
if (response.didCancel) {
console.log('User cancelled photo picker');
}
else if (response.error) {
console.log('ImagePicker Error: ', response.error);
}
else if (response.customButton) {
console.log('User tapped custom button: ', response.customButton);
}
else {
let source = {uri: 'data:image/jpeg;base64,' + response.data};
this.setState({
ImageSource: source,
data:response.data
});
console.log(response.data);
}
});
}
UploadImage = () =>{
RNFetchBlob.fetch('POST',
"https://movieworld.sramaswamy.com/SaveActorProfile.php", {
'Content-Type': 'multipart/form-data',
},
[
{data:JSON.stringify({User:'priyhadad@gmail.com'})},
{ImageLinks:{ name: 'image1', filename: 'image1.jpg', data:
this.state.data}},
]) .then((resp) => {
console.log(resp.text());
}).catch((err) => {
console.log(err);
});
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity onPress={this.selectPhotoTapped.bind(this)}>
<View style={styles.ImageContainer}>
{this.state.ImageSource === null ? <Text>Select a Photo</Text>:
<Image style={styles.ImageContainer} source=
{this.state.ImageSource} />
}
</View>
</TouchableOpacity>
<TouchableOpacity onPress={this.UploadImage} activeOpacity={0.6}
style={styles.button} >
<Text style={styles.TextStyle}> UPLOAD IMAGE TO SERVER </Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
backgroundColor: '#FFF8E1',
paddingTop: 20
},
ImageContainer: {
borderRadius: 10,
width: 250,
height: 250,
borderColor: '#9B9B9B',
borderWidth: 1 / PixelRatio.get(),
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#CDDC39',
},
TextInputStyle: {
textAlign: 'center',
height: 40,
width: '80%',
borderRadius: 10,
borderWidth: 1,
borderColor: '#028b53',
marginTop: 20
},
button: {
width: '80%',
backgroundColor: '#00BCD4',
borderRadius: 7,
marginTop: 20
},
TextStyle: {
color: '#fff',
textAlign: 'center',
padding: 10
}
});