首页 > 解决方案 > RN 62.2 中 formData 和 Axios 的奇怪行为

问题描述

我正在使用react-native-image-crop选择器和react-redux向导。在该向导的一个步骤中,用户上传他/她的图像,最后将向导数据提交到服务器。所以我使用这样的表单数据:

    let formData = new FormData();

    files?.forEach((f) => {
      let pathParts = f.path.split('/');
      let file = {
        uri: Platform.OS === 'android' ? f.path : f.path.replace('file://', ''),
        type: f.mime,
        name: pathParts[pathParts.length - 1],
      };
      formData.append('attachments', file);
    });
    try {
      let response = await axios.post('http://example.com/route', formData, {
        headers: {'Content-Type': 'multipart/form-data'},
      });
    } catch (error) {
      console.log(error);
      console.log(formData);
    }

当有图像时有错误:

[Error: Network Error]

formData 包含:

{"_parts": [["attachments", [Object]]]}

每个文件都是这样的json:

{
   "name": "cat_pic_9.jpg",
   "type": "image/jpeg",
   "uri": "file:///data/user/0/com.company.app/cache/react-native-image-crop-picker/cat_pic_9.jpg"
}

我尝试global.originalFormData单独安装 Form-Data 包,但没有区别。

现在我看到这个错误"_response": "read failed: EBADF (Bad file descriptor)" ::/

标签: react-nativefile-uploadaxiosmultipartform-data

解决方案


对于那些在 Android 中上传图片时遇到问题并且在 react-native 62.2 中遇到网络错误的用户,请使用此代码上传图片。上传将开始正常工作。

      formData.append('file', {
      name: 'photo.jpg',
      uri: imageUrl,
      type: 'image/jpeg',

    });

推荐阅读