使用axios

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（并且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等。

Answer 1

设置axios标头：

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