如何使用rn-fetch-blob发送图像的二进制编码字符串?

时间:2019-04-04 09:49:04

标签: react-native

我想将图像编码为二进制字符串,然后将其上传到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
     }
  });

0 个答案:

没有答案