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

Question

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

当用户完成裁剪后，他点击成功按钮，我得到一个 URL，如下所示： blob:https://localhost:5001/4434606b-29c4-483d-a1fc-1cefe50a3e3a”。因为我需要一个文件对象（所以我可以 post 它到我的服务器）我用这个代码将这个 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

设置 axios header :

axios.get(blobUrl, {
       responseType: 'blob'  /* or responseType: 'arraybuffer'  */         
})
.then(r => r.blob())
.then(blobFile => 
     new File([blobFile], fileName, { type: blobFile.type })
);

Answer 2

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

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

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

Convert Blob URL to file object with axios

javascript

reactjs

fetch-api

axios