Android 问题在 React-Native App 中使用 Axios 将图像上传到服务器答案

【问题标题】：Android issue uploading image to server using Axios in React-Native AppAndroid 问题在 React-Native App 中使用 Axios 将图像上传到服务器
【发布时间】：2017-07-07 08:31:33
【问题描述】：

我在尝试从 Android 上传/发布图像时收到以下网络错误。在 iOS 上完美运行。当 FormData 中不包含图像时，在 Android 上完美运行。

export function formatAvatarData(uri) {
  const form = new FormData();
  form.append('avatar', {
    uri: uri,
    type: 'file',
    name: 'image.jpg',
  });
  return form;
}

iOS - [按预期工作] uri:file:///Users/bobfriston/Library/Developer/CoreSimulator/Devices/16E84C5E-2545-408C-B870-38054DFA3471/data/Containers/Data/Application/7D2F59E5-450A-4A60-962A-D5C368DCD8DF/Documents/images/F5AD02D9-6C3E-46E5-B54E-D5C98206BAAA.jpg

ANDROID URI - [这导致网络错误如下] uri:content://com.google.android.apps.photos.contentprovider/0/1/content%3A%2F%2Fmedia%2Fexternal%2Fimages%2Fmedia%2F79/ORIGINAL/NONE/1408072274

Error: Network Error
    at createError (createError.js:15)
    at XMLHttpRequest.handleError (xhr.js:87)
    at XMLHttpRequest.dispatchEvent (event-target.js:172)
    at XMLHttpRequest.setReadyState (XMLHttpRequest.js:542)
    at XMLHttpRequest.__didCompleteResponse (XMLHttpRequest.js:378)

注意事项： “反应原生”：“=0.42.3”

AndroidManifest.xml 包含以下权限：

android.permission.INTERNET"
android.permission.SYSTEM_ALERT_WINDOW"/>
android.permission.CAMERA" />
android.permission.WRITE_EXTERNAL_STORAGE"/>

【问题讨论】：

标签： android react-native multipartform-data axios form-data

【解决方案1】：

尝试将type改为image/jpeg：

export function formatAvatarData(uri) {
  const form = new FormData();
  form.append('avatar', {
    uri: uri,
    type: 'image/jpeg', // <-- this
    name: 'image.jpg',
  });
  return form;
}

【讨论】：

谢谢！我可以确认 type 在 Android 上引发 Network Error
你有什么解决办法吗？自 4 天以来我一直面临问题并且没有更新。

【解决方案2】：

问题的解决方法在这里： https://github.com/facebook/react-native/issues/7306#issue-151988731

【讨论】：

【解决方案3】：

以下步骤帮助我解决了同样的问题。以防万一，

在 android/app/src/main/java/com/{yourProject}/MainApplication.java 评论以下行：
```
initializeFlipper(this, getReactNativeHost().getReactInstanceManager())
```
在 android/app/src/debug/java/com/{yourProject}/ReactNativeFlipper.java 第 43 行评论：
```
builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
```

图片上传代码：

var formData = new FormData();
   formData.append('UserId', 'abc@abc.com');
   formData.append('VisitId', '28596');
   formData.append('EvidenceCapturedDate', '09/10/2019 13:28:20');
   formData.append('EvidenceCategory', 'Before');
   formData.append('EvidenceImage', {
     uri: Platform.OS === 'android' ? `file:///${path}` : `/private${path}`,
     type: 'image/jpeg',
     name: 'image.jpg',
   });
   axios({
     url: UrlString.BaseUrl + UrlString.imageUpload,
     method: 'POST',
     data: formData,
     headers: {
       Accept: 'application/json',
       'Content-Type': 'multipart/form-data'
     },
   })
     .then(function (response) {
       console.log('*****handle success******');
       console.log(response.data);

     })
     .catch(function (response) {
       console.log('*****handle failure******');
       console.log(response);
     });

【讨论】：