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

Question

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

我使用这段代码成功生成了一个 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 和Blob s。

有没有办法解决它？

Answer 1

更新的答案

正如@TJCrowder 在评论中指出的那样，有一种更简洁的方法可以解决 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 POSTed。

这恰好发生在这里： 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,
});

这只会使请求工作。

Answer 2

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

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'
    }
})

Answer 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 });