Android：尝试使用 fetch 上传图像时网络请求失败

Question

我正在尝试将图像从存储上传到一个安静的 API，但我在 Android 上不断收到网络请求失败（这意味着请求甚至没有通过），还没有在 iOS 上检查，因为我不需要那部分然而。API 已经在运行，并且已经用 Postman 进行了测试。

React Native 代码是：

  body.append('vehicles',{ 
    resource_id: 2,
    resource: 'vehicles',
    cat_file_id: fileId,
    active: 1,
    vehicles: photo, //<- photo value below
    name: 'vehicles',
    type: 'image/jpeg'
  })

  fetch(`${BASE_URL}/files`, {
    method: 'POST',
    headers: {
      'Content-Type': 'multipart/form-data',
      Accept: "*/*",
      Authorization: 'Bearer '+auth
    },
    body: body

  }).then(response => response.json())
  .then(response => {
    console.log('IMAGE RESPONSE', response)
  })
  .catch(error => console.log('ERROR', error))

照片值看起来像 file:///storage/emulated/0/DCIM/...

响应：

ERROR TypeError: Network request failed
at XMLHttpRequest.xhr.onerror (fetch.umd.js:473)
at XMLHttpRequest.dispatchEvent (event-target-shim.js:818)
at XMLHttpRequest.setReadyState (XMLHttpRequest.js:574)
at XMLHttpRequest.__didCompleteResponse (XMLHttpRequest.js:388)
at XMLHttpRequest.js:501
at RCTDeviceEventEmitter.emit (EventEmitter.js:189)
at MessageQueue.__callFunction (MessageQueue.js:436)
at MessageQueue.js:111
at MessageQueue.__guard (MessageQueue.js:384)
at MessageQueue.callFunctionReturnFlushedQueue (MessageQueue.js:110)

在 Postman 上，请求看起来像这样：

已经尝试过：

• 删除接受标头
• 将接受值更改为“应用程序/json”
• file://从图片网址中删除
• 添加android:usesCleartextTraffic="true"到清单

已经检查：

• 没有值为 null 或 undefined
• 有可用的互联网连接，应用程序上的所有其他网络请求都正常工作
• 验证是正确的

React Native 版本是 0.61.5

Answer 1

我发现你的代码中缺少一行let formData = new FormData();。但不确定这就是这里的确切问题。顺便说一句，这是我的一个项目中的示例工作代码，我根据您的上下文对其进行了自定义。

1. 添加您的身份验证

2. 替换ImageURI为图像路径和URL_SAVE_IMAGE端点 url

   const newImage = {
       resource_id: 2,
       resource: 'vehicles',
       cat_file_id: 1,
       active: 1,
       vehicles: ImageURI,
       name: "my_photo.jpg",
       type: "image/jpg",
   };
   
   let formData = new FormData();
   formData.append("vehicles", newImage);
   
   return fetch(URL_SAVE_IMAGE, {
       method: 'POST',
       headers: {
           "Content-Type": "multipart/form-data"
       },
       body: formData
   }).then(response => response.json());
   

它应该有效！