关于fileReader的一个坑

最新推荐文章于 2025-07-02 08:00:00 发布

置顶 5649498

最新推荐文章于 2025-07-02 08:00:00 发布

阅读量1.1w

点赞数 2

CC 4.0 BY-SA版权

分类专栏： js 文章标签： javascript 图片 base64

本文链接：https://blog.youkuaiyun.com/qq_35772366/article/details/79430073

js 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了如何使用FileReader API将图片文件转换为Base64格式进行展示，并探讨了JavaScript异步处理机制，解释了为何两次加载相同文件时不会触发加载完成事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在用fileReader做图片浏览时，
使用base64格式

var file=this.$refs.resource.files[0]
var reader = new FileReader();
// 以DataURL的形式读取文件:
reader.readAsDataURL(file);

//读取后的回调js是多线程
reader.onloadend=(e)=>{

 }

Javascript 本身是单线程的，并没有异步的特性。由于 Javascript 的运用场景是浏览器，浏览器本身是典型的 GUI 工作线程，GUI 工作线程在绝大多数系统中都实现为事件处理，避免阻塞交互，因此产生了 Javascript 异步基因。此后种种都源于此。
//没错，网络，文件。。。。都是基于浏览器的接口实现的
作者：响马
链接：https://www.zhihu.com/question/20866267/answer/25935927
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

如果两次读取的都是相同的文件，并不会执行加载完成事件。