直击痛点，一文详解FileReader与URL.createObjectURL实现文件预览！

2023-12-04 12:28:17

在前端开发中，图片、视频的上传预览功能必不可少，然而传统的做法是先上传文件到服务器，然后服务器返回文件的地址，再将该地址赋给img或video的src属性，这不仅费时费流量，而且用户体验也不佳。

FileReader和URL.createObjectURL的出现，为我们提供了解决方案的利器。FileReader是一个JavaScript API，它允许我们直接读取文件的二进制数据，而URL.createObjectURL则可以根据这些二进制数据生成一个临时的URL，该URL指向的文件内容与原始文件相同。

利用这两个API，我们可以轻松实现文件上传预览功能。具体步骤如下：

使用FileReader读取文件
将FileReader读取到的二进制数据传递给URL.createObjectURL
将URL.createObjectURL生成的临时URL赋给img或video的src属性
当用户点击上传按钮时，将文件上传到服务器

通过这种方式，用户可以在文件上传完成之前就看到文件的预览，大大提升了用户体验。而且，由于文件预览是在本地完成的，因此也不需要额外的服务器资源。

下面我们来看一个简单的示例代码：

function previewFile(file) {
  // FileReader读取文件
  var reader = new FileReader();
  reader.onload = function() {
    // URL.createObjectURL生成临时URL
    var url = URL.createObjectURL(reader.result);
    // 将临时URL赋给img或video的src属性
    document.getElementById('preview').src = url;
  };
  reader.readAsDataURL(file);
}