Question

我正在尝试将图像从存储设备上传到一个稳定的API，但是在Android上我一直收到网络请求失败的消息（这意味着请求甚至没有通过），因为我没有在iOS上进行检查还需要那一部分。 API已经可以使用，并且已经过Postman的测试。

React本机代码是：

  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)

在邮递员上，请求看起来像这样：

已尝试：

删除“接受”标头
将“接受”值更改为“ application / json”
从图像网址中删除file://
将android:usesCleartextTraffic="true"添加到了清单

已选中：

没有值是null或未定义
互联网连接正常，应用程序上的所有其他网络请求均正常运行
身份验证正确

React本机版本为0.61.5

Answer 1

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

添加身份验证

用图像路径和ImageURI端点URL替换URL_SAVE_IMAGE

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());

应该可以！

Answer 2

您的fetch( $ {BASE_URL} / files后端服务器是什么。.通常在尝试连接到localhost计算机上的后端api时会发生。即使您使用localhost的IP地址，它仍然存在，因此最好使用在线服务器进行测试，或者仅使用ngrok（https://ngrok.com/）通过互联网为后端localhost提供服务。

Answer 3

在gradle.properties中，将脚蹼版本更改为0.47.0

Answer 4

尝试使用Xhr，它按预期运行！

const URL = "ANY_SERVER/upload/image"
  const xhr = new XMLHttpRequest();
  xhr.open('POST', url); // the address really doesnt matter the error occures before the network request is even made.
  const data = new FormData();
  data.append('image', { uri: image.path, name: 'image.jpg', type: 'image/jpeg' });

  xhr.send(data);
  xhr.onreadystatechange = e => {
    if (xhr.readyState !== 4) {
      return;
    }

    if (xhr.status === 200) {
      console.log('success', xhr.responseText);
    } else {
      console.log('error', xhr.responseText);
    }
  };

Answer 5

除了使用 Expo FileSystem uploadAsync 外，对我没有任何作用

uploadImage = async ({ imageUri } }) => FileSystem.uploadAsync(
    apiUrl,
    imageUri,
    {
      headers: {
        // Auth etc
      },
      uploadType: FileSystem.FileSystemUploadType.MULTIPART,
      fieldName: 'files',
      mimeType: 'image/png',
    });

注意 - imageUri 格式为 file:///mypath/to/image.png

快乐的日子！

Android：尝试通过抓取方式上传图片时，网络请求失败

5 个答案: