如何从反应JS中的Blob响应中检索文件名 - JavaScript

有时，我们在进行某些操作时，需要从响应中检索到Blob类型的文件，并从中提取文件名。在JavaScript中，实现这个任务并不难，下面我们将一步步进行介绍。

获取Blob类型响应

首先，我们需要获取带有Blob类型响应的服务器响应。可以使用XMLHttpRequest对象或fetch API来实现。在下面的代码片段中，我们将使用fetch API来获取响应。

fetch(url).then(res => res.blob()).then(blob => {
    // do something with the blob
});

注意，上述代码将响应的blob数据作为一个promise对象来获取，以便我们能够安全地使用异步程序来处理响应。

从Blob类型响应中获取文件名

一旦我们获得了响应中的Blob类型数据，我们便可以从中提取文件名。为此，可以使用FileReader对象或URL.createObjectURL()方法。在下面的代码片段中，我们将使用URL.createObjectURL()方法来获取文件名。

fetch(url).then(res => res.blob()).then(blob => {
    const filename = res.headers.get("content-disposition").split("filename=")[1];
    const url = URL.createObjectURL(blob);
    // use the url or filename as needed
});

在上述示例中，我们使用res.headers.get()方法获取服务器响应中的content-disposition头，这个头存储了文件名。由于这个头的值可能包含引号或其它字符，我们可以使用字符串的split()方法来获取文件名。

接下来，我们使用URL.createObjectURL()方法来创建一个可用于访问文件的URL。如果需要获得文件名，我们可以将filename变量用于其它操作中。

总结

在JavaScript中，从Blob类型响应中检索文件名并不难。我们可以通过使用XMLHttpRequest对象或fetch API来获取带有Blob类型响应的服务器响应。一旦我们获得了响应中的Blob类型数据，我们便可以从中提取文件名。这可以通过使用FileReader对象或URL.createObjectURL()方法来实现。