JS new FileReader和new FormData作用和具体如何使用

new FileReader 和 new FormData 都是 JavaScript 中用于处理文件的对象，但是它们的作用和用法有所不同。

new FileReader 是一个用于读取文件的对象。它可以读取本地文件系统中的文件或者通过 input 元素上传的文件。通过 FileReader 对象，开发者可以以文本或二进制形式读取文件数据，并进行相关的处理，例如展示在页面上或者发送到服务器上。FileReader 主要用于读取文件数据，比如将文件读入内存并显示在网页上，或者读取文件的元信息。

new FormData 是一个用于创建表单数据的对象。它可以用于将表单数据序列化为一组键值对，然后通过 AJAX 发送到服务器上。使用 new FormData 对象，可以方便地实现文件上传操作，同时还可以为表单数据添加额外的键值对。FormData 主要用于将表单数据序列化，可用于 AJAX 请求，支持文件上传功能。

因此，尽管 new FileReader 和 new FormData 都可以用于处理文件，但是它们的作用和使用场景不同，需要根据具体需求进行选择和使用。

FileReader

FileReader 是一个用于读取 File 或 Blob 对象中内容的 Web API 接口，可以实现异步读取文件内容，读取的内容可以用于展示或者上传至后端服务器。

使用 FileReader 可以分为以下步骤：

（1）创建一个 FileReader 对象。

javascript 复制代码

const fileReader = new FileReader();

（2）监听 FileReader 对象的事件。

javascript 复制代码

fileReader.onload = function () {
  // do something with the loaded content
};

fileReader.onerror = function () {
  // handle the error
};

（3）将文件内容读入到 FileReader 中。

javascript 复制代码

fileReader.readAsText(file);

readAsText() 方法可以用于读取文本文件内容，也可以使用其他方法如 readAsArrayBuffer() 读取二进制文件内容等。

完整代码如下：

javascript 复制代码

const fileReader = new FileReader();
fileReader.onload = function () {
  console.log(fileReader.result);
};
fileReader.onerror = function () {
  console.error(fileReader.error);
};
fileReader.readAsText(file);

FormData

FormData 是一个用于构建表单数据的 Web API 接口，可以方便地将表单数据转换为 key-value 格式发送至后端服务器。

使用 FormData 可以分为以下步骤：

（1）创建一个 FormData 对象。

javascript 复制代码

const formData = new FormData();

（2）将表单数据添加到 FormData 对象中。

javascript 复制代码

formData.append('username', 'John');
formData.append('password', '123456');

（3）将 FormData 对象发送到后端服务器。

javascript 复制代码

fetch('/api/login', {
  method: 'POST',
  body: formData,
});

完整代码如下：

javascript 复制代码

const formData = new FormData();
formData.append('username', 'John');
formData.append('password', '123456');
fetch('/api/login', {
  method: 'POST',
  body: formData,
})
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.error(error);
  });

注意，使用 FormData 对象时要将请求方法设置为 POST，并且将 FormData 对象作为请求体发送。另外，如果表单中包含文件上传时，可以通过 append() 方法添加 File 对象。