Android 使用React Native中的XMLHttpRequest和FormData将图像上载到服务器

Android 使用React Native中的XMLHttpRequest和FormData将图像上载到服务器,android,react-native,Android,React Native,我正在尝试使用以下示例将图像上载到服务器: https://gist.github.com/Tamal/9231005f0c62e1a3f23f60dc2f46ae35 我查看了一些教程,代码应该可以运行。但是Android中的uri显示uri uri:content://media/external/images/media/4985 URI来自组件 https://github.com/jeanpan/react-native-camera-roll-picker URI应该是 file:/

我正在尝试使用以下示例将图像上载到服务器:

https://gist.github.com/Tamal/9231005f0c62e1a3f23f60dc2f46ae35

我查看了一些教程,代码应该可以运行。但是Android中的uri显示uri

uri:content://media/external/images/media/4985

URI来自组件

https://github.com/jeanpan/react-native-camera-roll-picker

URI应该是

file://....

那么,为什么上传代码不起作用

我怎样才能转换这个值


content://...
file://....
是否可以用React native将图像上载到服务器?或者我的假设正确吗?

我正在使用react native image picker从库中获取图像。我已经用一个方法名编写了以下代码,即selectPhoto()以从库中选择图像

selectedPhoto = () => {
//Open Image Picker

const options = {
  quality: 1.0,
  maxWidth: 500,
  maxHeight: 500,
};

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 :response.uri};
    console.log(source.uri);
    this.setState({
      profilePhoto: source
    });
  }
}); }
这将为我提供所选图像的uri,我已在状态变量中设置。然后写下面的代码上传图片

var profiePicture = {
    uri: this.state.profilePhoto.uri,
    type: 'image/jpg', // or photo.type image/jpg
    name: 'testPhotoName',
  }

  // API to upload image
  fetch('http://www.example.com/api/uploadProfilePic/12345', {
    method: 'post',
    headers:{
      'Accept': 'application/json',
      'content-type': 'multipart/form-data',
    },
    body: JSON.stringify({
      'profile_pic' : profiePicture
    })
  }).then((response) => response.json())
  .then((responseJson) => {
    console.log(responseJson);
  })
  .catch((error) => {
    console.error(error);
  });

这段代码正在我的一个项目中工作。

我想即使我使用了您提到的组件,它也是作为uri提供的:'content://media/external/images/media/4985我正在学习react native,今天我准备了一个上传图片的演示。这对我来说很好。