前端处理 File 的基础方法

在前端开发过程中，处理 File 对象的场景还是蛮多的，熟练掌握对 File 对象的处理方法，可以极大提高前端工作的幸福度。

JavaScript 处理 File 对象的主要方式是通过 HTML5 的 File API。File API 提供了一组用于处理本地文件的 API，包括创建、读取、写入和删除文件等操作。下面是一些常用的 File API 方法：

createObjectURL()

createObjectURL() 方法用于创建一个可以用于展示媒体文件的 URL。这个方法主要用于浏览器中的媒体文件，例如图片、音频和视频等。createObjectURL() 方法创建的 URL 可以用于在页面上展示媒体文件，或者用于在其他 JavaScript 代码中访问和处理媒体文件。

createObjectURL() 方法接受一个 File 对象或 Blob 对象作为参数，并返回一个可以用于展示媒体文件的 URL。在创建 URL 时，如果媒体文件的类型为 text/plain，则该方法会自动将其转换为 text/html 类型。

const file = new File('image.jpg', 'image.jpg');
const imageUrl = URL.createObjectURL(file);
document.body.appendChild(new Image(imageUrl));

在上面的代码中，我们首先定义了一个 File 对象，表示要展示的图片文件。然后，我们使用 createObjectURL() 方法创建了一个 URL，并将其赋值给一个变量 url。最后，我们使用 new Image() 方法创建一个新的 Image 对象，并将 URL 赋值给它的 source 属性。这样就可以在页面上展示图片了。

Blob()

Blob() 方法用于创建一个新的 Blob 对象。Blob 对象可以表示任何类型的数据，包括文本、图像、音频和视频等。我们可以使用 Blob() 方法创建一个用于表示文本的 Blob 对象：

const text = 'Hello, World!';
const blob = new Blob([text], {type: 'text/plain'});

需要注意的是，Blob() 方法创建的 Blob 对象的内容是固定的，不会自动添加结束符号。因此，在使用 Blob() 方法创建文本 Blob 对象时，需要确保字符串的结尾是一个合法的文本字符，以避免文本 Blob 对象被视为其他类型的 Blob 对象。

FileReader()

FileReader() 方法用于读取本地文件。FileReader 对象接受一个回调函数作为参数，该回调函数会在读取完成后被调用。我们可以使用 FileReader() 方法读取图片、音频和视频等文件：

const file = new File('image.jpg', 'image.jpg', {type: 'image/jpeg'});
const reader = new FileReader();
reader.onload = function(event) {
  const blob = event.target.result;
  const url = URL.createObjectURL(blob);
  const img = new Image(url);
  document.body.appendChild(img);
};
reader.readAsArrayBuffer(file);

FileReader() 方法不支持在 Web Workers 中读取文件，也不支持在加载页面时读取文件。

FileWriter()

FileWriter() 方法用于写入文件。FileWriter 对象接受一个回调函数作为参数，该回调函数会在写入完成后被调用。我们可以使用 FileWriter() 方法写入图片、音频和视频等文件：

const file = new File('image.jpg', 'image.jpg');
const writer = new FileWriter();
writer.onwriteend = function(event) {
  console.log('Write complete');
};
writer.write(file);

需要注意的是，File API 并不是完全的标准，因此在不同的浏览器中可能存在兼容性问题。此外，使用 File API 处理本地文件需要获取用户的访问权限，因此需要谨慎使用。

总结

今天就介绍这些基础的 File 处理方式，希望能对大家有所帮助。