Question

我正在尝试使用以下提供的示例将图像上传到服务器：

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中的服务器？或者我的假设是否正确？

Answer 1

我正在使用 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);
  });

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

使用XMLHttpRequest和React-Native

1 个答案: