使用 axios 上传图片 react native android

Question

我正在尝试将图像上传到 API，iOS 版本运行良好，但 android 中存在问题，我的代码如下所示。

const uploadUri =
    Platform.OS === 'ios'
      ? uploadImageFile.replace('file:', '')
      : uploadImageFile;
  // console.log(uploadUri);
  const data = new FormData();
  data.append('file', {
    uri: uploadUri,
    name: 'file',
    type: 'image/jpg',
  });
  Axios.post(`${API.BASE_URL}/user/image`, data, {
    headers: {
      Authorization: token,
      'Content-Type': 'multipart/form-data',
    },
  })
    .then((res) => {
      setActivity(false);
      setIsImageEdit(false);
      console.log('success');
    })
    .catch((error) => {
      setActivity(false);
      if (error.response) {
        console.log(error.response.data);
        console.log(error.response.status);
        console.log(error.response.headers);
      } else if (error.request) {
        console.log(error.request);
      } else {
        console.log('Error', error.message);
      }
      setIsImageEdit(false);
    });

我得到的错误响应是

{"DONE": 4, "HEADERS_RECEIVED": 2, "LOADING": 3, "OPENED": 1, "UNSENT": 0, "_aborted": false, "_cachedResponse": undefined, "_hasError": true, "_headers": {"accept": "application/json, text/plain, */*", "authorization": "7aeb23f62bd748c39c9e8652eb1056e2"}, "_incrementalEvents": false, "_lowerCaseResponseHeaders": {}, "_method": "POST", "_perfKey": "network_XMLHttpRequest_https://capi-test.beebl.io/user/image", "_requestId": null, "_response": "Could not retrieve file for uri /storage/emulated/0/Pictures/images/image-448777a5-1734-41f4-857e-a99d5239c279.jpg", "_responseType": "", "_sent": true, "_subscriptions": [], "_timedOut": false, "_trackingName": "unknown", "_url": "https://capi-test.beebl.io/user/image", "readyState": 4, "responseHeaders": undefined, "status": 0, "timeout": 0, "upload": {}, "withCredentials": true}

"_response": "无法为 uri /storage/emulated/0/Pictures/images/image-448777a5-1734-41f4-857e-a99d5239c279.jpg 检索文件"

Answer 1

我通过添加

修复了它

android:requestLegacyExternalStorage="true"

在AndroidManifest.xml

使用 axios 上传图片 react native android

Image upload with axios react native android

android

image-upload

react-native

react-native-image-picker