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

Question

我几天来一直在努力上传图像。\nI\xe2\x80\x99m 使用这样的 formdata：

\n\n

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

\n\n

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

\n\n

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

\n\n

我尝试了所有技巧，将图像读取为 blob，删除内容类型，其他库（如 axios 等）\xe2\x80\xa6\n无论如何，我总是收到 400 bad file format 错误。

\n\n

formdata 中是否缺少 I\xe2\x80\x99m 的内容？\n（在后端我们使用 ASP.NET）

\n

Answer 1

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

博览会 - 移动应用程序代码

  // 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

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