FileReader实例化：为何要先创建对象再进行文件读取？

一分耕耘，一分收获！既然打开了这篇文章《FileReader实例化：为何要先创建对象再进行文件读取？》，就坚持看下去吧！文中内容包含等等知识点...希望你能在阅读本文后，能真真实实学到知识或者帮你解决心中的疑惑，也欢迎大佬或者新人朋友们多留言评论，多给建议！谢谢！

读取文件的 io 操作为何要先实例化 filereader？

当使用 html 元素 <input type="file"> filereader 实例，然后通过其方法来处理文件。那么问题来了，为什么不能直接将文件传递给 filereader 构造函数，但为什么要先创建一个实例，然后再做一些事情呢？

创建 filereader 实例的原因

filereader 实例化允许我们扩展文件处理逻辑。

例如，考虑以下代码：

const filereader = new filereader();
filereader.readastext(file);
filereader.addeventlistener('load', () => {
  console.log(filereader.result);
});

假设此后我们收到文件太大并且读取的反馈过程需要很长时间。在这种情况下，给定 filereader 实例，我们可以轻松添加事件处理程序来跟踪进度。

const filereader = new filereader();
filereader.readastext(file);
filereader.addeventlistener('load', () => {
  console.log(filereader.result);
});

// Добавлено
filereader.addeventlistener('progress', (ev) => {
  console.log(`Загружено ${ev.loaded} из ${ev.total}`);
});

如果我们稍后需要添加中止下载按钮，我们可以再次使用 filereader 实例并调用 abort( ) 方法来中止读取过程。

const filereader = new filereader();
filereader.readastext(file);
filereader.addeventlistener('load', () => {
  console.log(filereader.result);
});

// Добавлено
filereader.addeventlistener('progress', (ev) => {
  console.log(`Загружено ${ev.loaded} из ${ev.total}`);
});

// Добавлено
cancel.addeventlistener('click', () => {
  filereader.abort();
}, { once: true });

因此实例化 filereader 可以让我们更灵活地使用其方法，并允许我们做更多事情。

为什么我们不能传递一个文件直接传递给 filereader 构造函数？

在 java 等语言中，类构造函数可以采用参数来初始化对象。然而，在 javascript 中，创建类的实例，然后将参数传递给它来执行操作是很常见的。

有些人认为创建实例并随后立即调用方法可能会导致加载文件时出现混乱在构造函数中。将实例化与方法调用分开有助于避免歧义。

此外，将 filereader 与方法调用分开实例化可以允许重复使用它的一个实例，例如：

const input = document.getelementbyid('input');

// Используем один экземпляр
const filereader = new filereader();

input.onchange = () => {
  const file = input.files?.item(0);
  if (!file) return;

  filereader.readastext(file);
  filereader.onload = () => {
    console.log(filereader.result);
  };
};

这样我们减少创建的 filereader 实例的数量。

filereader 替代方案

有适合检索不同类型数据的 filereader 替代方案。让我们看一些示例：

• 文本：使用 file 对象的 text() 方法，例如：

const file = input.files?.item(0);
const text = await file.text();

• 图片：为<img>标签创建临时url并显示图片，加载后释放url：

const file = input.files?.item(0);
const blobURL = URL.createObjectURL(file);
img.src = blobURL;
img.addEventListener('load', () => {
  URL.revokeObjectURL(blobURL);
});

好了，本文到此结束，带大家了解了《FileReader实例化：为何要先创建对象再进行文件读取？》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！