Question

我想在本机中上传图像并使用react-native-cameraroll获取图像：

我尝试发送数据：

const fileName = photo.node.image.filename || photo.node.image.uri.split("/").reverse()[0];
body.append(
  "photo",
  { uri: photo.node.image.uri, type: photo.node.type, name: fileName },
);

但不起作用。发送给服务器的是photo: [object Object]

我也尝试过JSON.parse({ uri: photo.node.image.uri, type: photo.node.type, name: fileName })

在邮递员中，上传作品是什么，而给我作为代码的是axios：

data.append('photo', fs.createReadStream('/home/hamidreza/Desktop/Screenshot_1593273599.png'));

对于XHR：

data.append("photo", fileInput.files[0], "Screenshot_1593273599.png");

如何使用这些代码上传图像？

Answer 1

使用react-native-image-crop-picker github链接是https://github.com/ivpusic/react-native-image-crop-picker来选择图像

_handlePhotoPress = () => {
    ImagePicker.openPicker({
      width: 200,
      height: 200,
      cropping: true,
      mediaType: 'photo'
    })
      .then(image => {
        this.setState({ pic: image.sourceURL, file: image })
        console.log(image)
        const formData = new FormData()
        formData.append('file', image)
        formData.append('upload_preset', 'XXXX')
        return axios({
              method: 'post',
              url: 'yourUrl',
              data: formData,
              headers: {'Content-Type': 'multipart/form-data' }
              })
              .then(function (response) {
                  //handle success
                  console.log(response);
              })
              .catch(function (response) {
                  //handle error
                  console.log(response);
              });
      })
      .catch(err => {
        console.log(JSON.stringify(err));
     })
  }

https://github.com/ivpusic/react-native-image-crop-picker来选择图片

Answer 2

在调试器react-native中，您需要删除调试器的全局配置以使FormData起作用。

例如：

GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest

参考问题： https://github.com/jhen0409/react-native-debugger/issues/38

在React Native中使用Axios上传图像

2 个答案: