URL.createObjectURL 与 FileReader：Web 文件处理两大法宝的对比

正小安

于 2024-09-15 21:23:41 发布

阅读量340

点赞数 8

分类专栏： vue杂谈文章标签：前端 javascript

本文链接：https://blog.csdn.net/everfoot/article/details/142289174

版权

vue杂谈专栏收录该内容

16 篇文章 1 订阅

订阅专栏

URL.createObjectURL 与 FileReader：Web 文件处理两大法宝的对比

在Web开发中，处理用户上传的文件是一项常见且重要的任务。URL.createObjectURL和FileReader是两种常用于此目的的Web API，它们各有特点，适用于不同的场景。本文将深入探讨这两种方法的区别、用法及最佳实践。

URL.createObjectURL：内存中的文件预览利器

用途

URL.createObjectURL方法用于创建一个指向内存中文件（如File对象或Blob对象）的临时URL。这个URL可以像访问网络上的资源一样，直接在浏览器中使用，无需将文件上传至服务器，非常适合文件预览场景。

性能与生命周期

性能：由于它不需要读取文件的全部内容到JavaScript环境中，因此通常比FileReader更快。
生命周期：这个URL在创建它的文档的生命周期内有效，但不会自动释放。为了避免内存泄漏，应当在不需要时调用URL.revokeObjectURL()来手动释放它。

使用场景

文件预览：如图片、视频或PDF文件的即时预览。
下载链接：为Blob对象创建下载链接。

示例代码

// 假设用户已选择一个文件并存储在file变量中
const file = document.querySelector('input[type="file"]').files[0];
// 创建一个指向该文件的URL
const objectURL = URL.createObjectURL(file);
// 使用这个URL显示文件
const img = document.createElement('img');
img.src = objectURL;
document.body.appendChild(img);

// 当不再需要时，释放URL
// URL.revokeObjectURL(objectURL);

FileReader：深入文件内容的处理专家

用途

FileReader是一个Web API，它允许Web应用程序异步读取用户计算机上文件（或Blob对象）的内容。与URL.createObjectURL不同，FileReader可以读取文件内容到JavaScript中，并支持多种格式的输出，如文本、DataURL等。

性能与生命周期

性能：读取大文件时可能会比较慢，因为它需要将整个文件内容加载到内存中。
生命周期：读取操作的结果存储在FileReader的result属性中，直到被覆盖或页面刷新。

使用场景

客户端文本文件处理。
图片的像素级操作或修改。
文件内容的前端验证。

示例代码

// 假设用户已选择一个文件并存储在file变量中
const file = document.querySelector('input[type="file"]').files[0];
// 创建一个FileReader对象
const reader = new FileReader();

// 读取完成后的处理
reader.onload = function(e) {
    const img = document.createElement('img');
    img.src = e.target.result; // DataURL
    document.body.appendChild(img);
};

// 读取文件为DataURL
reader.readAsDataURL(file);