美文网首页
获取FileReader读取结果

获取FileReader读取结果

作者: 小遁哥 | 来源:发表于2020-04-14 21:29 被阅读0次

我总感觉和你离得很近,实际很远

将图片转换为base64码的逻辑,多用于上传图片前的预览。

一开始随便从网上搜索了一下,能用!


export function getDataUrl(argFile) {
    const reader = new FileReader();

    reader.onload = function (e) {
        console.log(e.target.result);
    }
    reader.readAsDataURL(argFile);
}

后来尝试TS时,纠结这个事件对象是啥类型(后来发现自己很蠢...),发现不需要事件对象也可以取到

export function getDataUrl(argFile) {
    const reader = new FileReader();

    reader.onload = function () {
         console.log(reader.result);
    };
    reader.readAsDataURL(argFile);
}

想要文章记录的今天,直接用this就可以了...

我第一时间咋就没想到呢!

export function getDataUrl(argFile) {
    const reader = new FileReader();

    reader.onload = function () {
         console.log(this.result);
    };
    reader.readAsDataURL(argFile);
}

相关文章

  • 获取FileReader读取结果

    我总感觉和你离得很近,实际很远 将图片转换为base64码的逻辑,多用于上传图片前的预览。 一开始随便从网上搜索了...

  • HTML5之FileReader

    FileReader接口提供了读取文件的方法和包含读取结果的事件模型 创建实例 FileReader对象的方法方法...

  • 使用HTML5实现图片压缩上传功能

    实现流程: 获取 上传的文件; 使用FileReader读取图片,并新建一个Image对象将FileReader读...

  • HTML5 - 文件读取API(FileReader)

    FileReader读取完文件后,会将结果存储在result属性中,而不是直接返回。 FileReader提供的读...

  • FileReader 的使用

    FileReader作为文件API的重要成员用于读取文件,FileReader接口提供了读取文件的方法和包含读取结...

  • JavaScript前端图片压缩

    实现思路 获取input的file 使用fileReader() 将图片转为base64 使用canvas读取ba...

  • JavaScript之狗血笔记

    上传文件或目录 读取文件 调用FileReader对象的方法 (FileReader接口提供了读取文件的...

  • FileReader文件读取和图片预览

    FileReader文件读取和图片预览 FileReader是什么 FileReader对象允许Web应用程序异步...

  • Javascript上传图片转base64并预览,拿走不谢!

    js中的FileReader结合input:file可以很方便的读取本地文件。不过要知道FileReader读取文...

  • IO

    IO 复习 File 构造方法 File类的高级获取 常用方法 分析过程 FileReader 专门读取字符数据的...

网友评论

      本文标题:获取FileReader读取结果

      本文链接:https://www.haomeiwen.com/subject/kyezmhtx.html