时间戳

首页 > 解决方案 > 使用 axios 将 Blob URL 转换为文件对象

javascript - 使用 axios 将 Blob URL 转换为文件对象

问题描述

我有一个图像裁剪器，它为每个裁剪创建一个 blob 文件。

当用户完成裁剪后，他单击了一个成功按钮，我得到一个如下所示的 URL：blob: https://localhost:5001/4434606b-29c4-483d-a1fc-1cefe50a3e3a “。因为我需要一个文件对象（所以我可以将其发布到我的服务器）我使用以下代码将此 blob 转换为实际的文件对象：

const file = await fetch(blobUrl).then(r => r.blob()).then(blobFile => new File([blobFile], fileName, { type: blobFile.type }));

此代码有效，但不幸的是，我需要提供 IE11 支持，并且由于不支持 fetch（并且 polyfills 似乎不适用于此 fetch 调用）我想将此语句迁移到 axios（我已经在我的所有地方都使用过）应用）。

这是我尝试过的：

axios.get(blobUrl).then(r => r.blob()).then(blobFile => new File([blobFile], fileName, { type: blobFile.type }));

当我查看第一次调用 ( then(r => r.blob()) 的响应时，我得到如下信息： 在此处输入图像描述

我认为这是因为图像无法在控制台中显示，但是当我尝试调用“r.blob()”时，我得到了这个：

r.blob 不是函数

如何将我的 axios 调用更改为像上面的 fetch 调用一样工作？

旁注：我不知道我的回复将具有哪种文件类型（除了它是图像），因此它可能是 png、jpg、gif 等。

标签： javascriptreactjsaxiosfetch

解决方案

显然我尝试的有点矫枉过正。这是对我有用的解决方案：

const config = { responseType: 'blob' };
axios.get(blobUrl, config).then(response => {
    new File([response.data], fileName);       
});

推荐阅读