使用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不受支持（并且填充似乎无法为此fetch调用工作），所以我想将此语句迁移到axios中（我已经在我的应用程序中全面使用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等。

- Tim Gerhard

---

请检查以下代码：const imageUrl = ''; axios({ url: {imageUrl}, method: 'GET', responseType: 'blob', // 重要 }) - kumaran

Answer 1

显然我所尝试的方法有点过度了。这是对我有效的解决方案:

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

- Tim Gerhard

---

运行得非常顺利！ - Donovan Keating

Answer 2

设置axios请求头：

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

- Babak Yaghoobi