用 axios 在 react native 中上传图片

Posted 2023-02-22

【中文标题】用 axios 在 react native 中上传图片

【英文标题】：Upload image with axios in react native

【发布时间】：2020-10-22 04:20:35

【问题描述】：

我想在 React Native 中上传图片并使用 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('SRC/FILE_NAME.png'));

这适用于 XHR：

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

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

【参考方案1】：

在调试器 react-native 中，您需要删除调试器全局配置才能使 FormData 工作。

例如：

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

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

【讨论】：

应该把它们放在哪里？

删除项目中的所有全局设置，您可以转到参考链接了解更多详情

我应该在哪里找到全局设置？

【参考方案2】：

使用 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 选择图片

【讨论】：

我想在我的应用程序中显示照片而不是打开用户图库。