react-native - 在 React Native (Expo) 中上传图片，使用 fetch 导致 400 错误

Question

这几天我一直在努力处理图片上传问题。我正在使用这样的表单数据:

let formData = new FormData();
formData.append('file', {
  uri: uri,
  name: `name`,
  type: `image/jpeg`,
});

iOS 上的 uri 类似于 asset-library://asset/path 在 Android 上类似于 content://media/external/images/media/25377 .

let options = {
  method: 'POST',
  body: formData,
  headers: {
    Accept: 'application/json',
    'Authorization': 'Bearer ' + token,
  },
};
let response = await fetch("https://myserverurl", options)

我尝试了所有技巧，将图像读取为 blob、删除内容类型、其他库(如 axios)等……不管怎样，我总是收到 400 错误的文件格式错误。

formdata 有什么我遗漏的吗？(在后端我们使用 ASP.NET)

Answer 1

我们遇到过类似的问题，并且能够通过以下方式解决问题。我们正在使用 NodeJS 后端(带有 multer)来处理文件上传。

Expo - 移动应用程序代码

  // extract the filetype
  let fileType = uri.substring(uri.lastIndexOf(".") + 1);

  let formData = new FormData();

  formData.append("photo", {
    uri,
    name: `photo.${fileType}`,
    type: `image/${fileType}`
  });

  let options = {
    method: "POST",
    body: formData,
    headers: {
      Accept: "application/json",
      "Content-Type": "multipart/form-data"
    }
  };

我们正在使用 fetch(apiUrl, options) 执行请求。

在我们的例子中，uri 是照片的本地文件路径(完整的 URI，例如 file:///...)和 apiUrl 是服务器端的端点。

我认为问题可能与 formdata 中 uri 的类型和格式有关。您是否尝试过使用图像选择器返回的 uri？