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

Question

我有一个图像裁剪器，可以为每种裁剪创建一个 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 (并且 polyfill 似乎不适用于此 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 is not a function

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

旁注:我不知道我的响应将具有哪种文件类型(除了它是图像)，因此它可能是 png、jpg、gif 等。

Answer 1

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

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