用 axios 在 react native 中上传图片答案

【问题标题】：Upload image with axios in react native用 axios 在 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");

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

【问题讨论】：

标签： javascript react-native file-upload axios

【解决方案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 选择图片

【讨论】：

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