React Native 中的 Axios - 无法发布 Blob 或文件答案

【问题标题】：Axios in React Native - Cannot POST a Blob or FileReact Native 中的 Axios - 无法发布 Blob 或文件
【发布时间】：2021-09-18 00:25:01
【问题描述】：

我正在尝试使用 Axios 发布一张图片的原始数据，在使用react-native-image-picker 拍摄后。

我使用这段代码成功生成了一个 blob：

const file = await fetch(response.uri);
const theBlob = await file.blob();

如果我检查 blob 的元数据，一切正常：MIME 类型、大小等。

但是，当我尝试使用 Axios 发布它时，使用：

axios({
    method: "POST",
    url: "https://my-api-endpoint-api.example.org",
    data: theBlob,
});

我在 API 端收到的是这个奇怪的 JSON 负载：

{"_data":{"lastModified":0,"name":"rn_image_picker_lib_temp_77cb727c-5056-4cb9-8de1-dc5e13c673ec.jpg","size":1635688,"offset":0,"type":"image/jpeg","blobId":"83367ee6-fa11-4ae1-a1df-bf1fdf1d1f57","__collector":{}}}

相同的代码在 React 上运行良好，我在尝试使用 File 对象而不是 Blob 对象时有相同的行为。

我在其他答案中看到我可以使用 Axios 以外的其他东西，例如 RNFetchBlob.fetch()，但由于我在 React 网站和 React Native 应用程序之间使用共享功能，我真的更喜欢一种允许我使用的方法使用 Axios 和Blobs。

有什么办法可以解决吗？

【问题讨论】：

标签： javascript reactjs react-native axios

【解决方案1】：

更新答案

正如@T.J.Crowder 在 cmets 中指出的那样，有一种更简洁的方法可以解决 React Native 主机环境的问题，而无需触及代码上的任何其他内容。

在index.js 文件中添加它就足够了，在其他所有内容之前：

Blob.prototype[Symbol.toStringTag] = 'Blob'
File.prototype[Symbol.toStringTag] = 'File'

我把我原来的答案留在下面，因为如果不想弄乱原型，这是一种可行的选择。

原答案

所描述的行为发生是因为 React Native 的宿主环境不能很好地处理 Blob 类型：它实际上只是一个对象。

事实上，如果你尝试在组件中渲染toString.call(new Blob())，你会在浏览器中看到[object Blob]，但在React Native 中会看到[object Object]。

问题是 Axios 的默认 transformRequest 实现将使用此方法 (toString.call) 来检查您是否正在向其传递 Blob 或一些通用对象。如果它看到您正在传递一个通用对象，它会将JSON.stringify 应用于它，从而生成您看到的奇怪的 JSON POST。

这恰好发生在这里：https://github.com/axios/axios/blob/e9965bfafc82d8b42765705061b9ebe2d5532493/lib/defaults.js#L61
实际上，这里发生的情况是第 48 行的 utils.isBlob(data) 返回 false，因为它实际上只是将 toString 应用于值并检查它是否为 [object Blob]，如上所述，情况并非如此。

我在这里看到的最快的解决方法是，因为您确定要传递Blob，所以只需使用一个仅返回数据原样的函数覆盖transformRequest，如下所示：

axios({
    method: "POST",
    url: "https://my-api-endpoint-api.example.org",
    data: theBlob,
    transformRequest: (d) => d,
});

这只会使请求生效。

【讨论】：

Nit: "...因为 React Native 的 JavaScript 引擎不能很好地处理 Blob 类型..." 不是 JavaScript 引擎，而是宿主环境。 Blob 是主机提供的类型。 React Native 中的 JavaScript 引擎（通常是 JavaScriptCore）可以很好地处理 Blob（例如，在 Safari 或 iOS 上的任何浏览器中），只要环境正确提供它。如果您描述的行为是真实的，那么这确实是 React Native 提供的宿主环境中的巨大错误，而不是 JavaScript 引擎。
谢谢@T.J.Crowder 我刚刚编辑了我的答案以更好地澄清这一点。我可以向你保证这是真的，我只花了半天时间：)
那肯定更好，但 FWIW 我只称它为“主机环境”，这不是 JavaScript 问题。或者更直接地说，“React Native 提供的 Blob 对象……”我不怀疑你，我只是没有设置来验证它。这是一个令人震惊的错误。你举报了吗？（他们所要做的就是更改 Blob 实例返回的 Symbol.toStringTag 属性。）
除非宿主环境真的搞砸了，否则您可以修复一次，然后使用通常使用的相同代码。修复方法是：Blob.prototype[Symbol.toStringTag] = "Blob";。只需在主脚本中执行一次，然后再执行其他任何操作。
哇，谢谢！我可以通过将其添加到我的 index.js 文件来确认它是否正常工作。我正在使用这种方法更新答案，我发现它更干净，并将其报告为本机问题。谢谢！

【解决方案2】：

您可以使用formData 通过 axios API 将文件发送到服务器，如下所示：

const file = await fetch(response.uri);
const theBlob = await file.blob();
var formData = new FormData();
theBlob.lastModifiedDate = new Date();
theBlob.name = "file_name";
formData.append("file", theBlob);

axios.post('https://my-api-endpoint-api.example.org', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
})

【讨论】：

我实际上需要将其作为原始 POST 数据发送，而不是作为表单数据发送。

【解决方案3】：

我最近确实遇到了这个问题（在 iPhone 上使用 Expo SDK 43）。我记得在 fetch 上使用 axios，因为过去我在使用 fetch 上传 blob 时遇到了问题。但我在这里试了一下，效果很好。

这个用例中的上下文是从 url 下载一个 giphy，然后将它放在带有签名请求的 s3 上。在网络和电话上都工作过。

const blob = await fetch(
          giphyUrl
).then((res) => res.blob());
fetch(s3SignedPutRequest, { method: "PUT", body: blob });

【讨论】：