new FormData与new Blob

一、使用new FormData()实现文件异步上传

1. new FormData()的定义与用途

在Web前端开发中，使用new FormData()可以方便地将表单数据和文件进行封装，并通过异步请求发送到后端服务器。FormData是一个JavaScript对象，它提供了一种简单的方式来构建key/value对，这些key/value对可以作为HTTP请求体的一部分发送给服务器。

2. 请求头怎么设置

当使用new FormData()发送异步请求时，浏览器会自动设置正确的请求头信息。请求头中的Content-Type字段会被设置为multipart/form-data，这告诉服务器端接收的是多部分的数据，其中包含了文件和其他参数。

3. 文件流怎么和其他参数一起通过POST请求传给后端

要将文件流与其他参数一起通过POST请求传递给后端，首先需要创建一个FormData对象，并向其添加需要传输的数据项。

以下是一个示例代码，演示了如何使用new FormData()实现文件异步上传：

// 创建FormData对象
var formData = new FormData();

// 添加文件到FormData
var fileInput = document.getElementById('fileInput');
formData.append('file', fileInput.files[0]);

// 添加其他参数到FormData
formData.append('name', 'John Doe');

// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();

// 设置回调函数
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        // 请求成功处理逻辑
        console.log(xhr.responseText);
    }
};

// 发送POST请求
xhr.open('POST', 'upload.php', true);
xhr.send(formData);

　　

在上面的代码中，我们首先创建了一个FormData对象，并通过append()方法向其添加了文件和其他参数。然后，我们创建了一个XHR对象并设置了回调函数。最后，我们使用open()方法指定了请求的方式、URL和是否使用异步模式，然后通过send()方法发送了POST请求，其中数据体为formData。

在后端服务器接收到这个POST请求后，可以通过相应的方法解析出文件和其他参数，如PHP中的$_FILES和$_POST变量，或Node.js中的multer中间件来处理上传的文件和其他参数。

综上所述，通过使用new FormData()，我们可以方便地实现文件的异步上传，并将文件流和其他参数一起传递给后端服务器进行处理。这种方法简单易用，具有良好的兼容性，是前端文件上传的常用技术之一。

 

二、使用 new Blob() 将文件流转换为文件

在Web前端开发中，有时候我们需要将文件流转换为文件对象。JavaScript提供了new Blob()构造函数，它可以帮助我们实现这个需求。本文将详细介绍如何使用new Blob()将文件流转换为文件，并解释文件的MIME类型与new Blob()的关系以及如何使用MIME类型确保new Blob()正确转换出文件的类型。

1. new Blob()的定义与用途

new Blob()是JavaScript中的一个构造函数，用于创建Blob对象。Blob（Binary Large Object）是一种表示不可变、原始数据的类文件对象。它可以存储二进制数据或文本数据，并且可以代表各种类型的数据，例如图片、音频、视频、压缩文件等。

2. new Blob()如何使用

要使用new Blob()将文件流转换为文件，首先需要获取文件流的数据。在浏览器环境中，可以使用Fetch API或XMLHttpRequest来获取文件流。假设我们已经获取到了文件流数据并保存在fileStream变量中，下面是将文件流转换为文件的代码示例：

const file = new Blob([fileStream]);

上述代码通过调用new Blob()构造函数，传入包含文件流数据的数组参数，创建了一个Blob对象，保存在file变量中。现在，file变量就是表示文件的Blob对象了。

3. 文件的MIME类型与new Blob()文件转换的关系

文件的MIME类型指的是文件的媒体类型，例如image/jpeg表示JPEG图片、audio/mp3表示MP3音频等。new Blob()方法在转换文件时并不会自动推断文件的MIME类型，而是需要开发者明确指定。

通常情况下，我们可以通过浏览器提供的API获取文件的MIME类型，例如使用File API中的type属性。如果已知文件的MIME类型，可以将其作为第二个参数传递给new Blob()构造函数，如下所示：

const file = new Blob([fileStream], { type: 'image/jpeg' });

上述代码将文件流数据和一个包含MIME类型的配置对象作为参数传递给new Blob()构造函数。这样，在创建Blob对象时就会设置正确的MIME类型。

4. 如何使用MIME类型使new Blob()转换出正确的文件类型

要确保new Blob()正确转换出文件的类型，首先需要确定文件的真实MIME类型。可以通过浏览器的开发者工具或相关的文件信息API来获取文件的MIME类型。

一旦获取到了文件的MIME类型，只需将其作为第二个参数传递给new Blob()构造函数即可，如前面示例所示。

需要注意的是，如果未指定MIME类型或指定的MIME类型不正确，浏览器可能无法正确处理Blob对象，导致文件无法正常预览或下载。

总结：

使用new Blob()可以轻松将文件流转换为文件对象。通过传递文件流数据和MIME类型给new Blob()构造函数，我们可以确保生成的Blob对象具有正确的类型。这使得在前端开发中处理文件流变得更加灵活和便捷。