读取文件的 io 操作为何要先实例化 filereader？
当使用 html 元素 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();
登录后复制 图片：为标签创建临时url并显示图片，加载后释放url：
const file = input.files?.item(0);const blobURL = URL.createObjectURL(file);img.src = blobURL;img.addEventListener('load', () => { URL.revokeObjectURL(blobURL);});
登录后复制
以上就是FileReader实例化：为何要先创建对象再进行文件读取？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2650934.html
