基于 FileReader 把文件读取为 base64 的字符串

Qiemoer

已于 2022-05-22 21:59:26 修改

阅读量737

点赞数 1

文章标签：前端

于 2022-05-22 21:44:37 首次发布

本文链接：https://blog.csdn.net/Qiemo_/article/details/124916938

版权

FileReader 对象允许web应用程序异步读取在用户计算机上的文件(或原始数据缓冲区)的内容,使用File或者Blob对象指定要读取的文件或者数据

File对象可以是一个input元素上选择文件返回的FileList对象,还可以是来自拖放操作生成的DataTransfer对象,还可以是来自HTMLCanvasElement上执行mozGetAsFile()方法返回结果

属性

FilerReader.error(只读) 表示在读取文件时发生的错误

FilerReader.readyState(只读) 表示FileReader状态的数字

FileReader.result(只读) 该属性只在读取完成之后有效,数据的格式取决于使用哪个方法来启动读取操作

事件处理

onabort:读取文件断片时触发

onerror:读取文件错误时触发

onload:文件读取成功时触发

onloadend:文件读取完毕之后，不管成功还是失败触发

onloadstart: 开始读取文件时触发

onprogress:读取文件过程中触发

请求体	必选	类型	说明	格式
avatar	是	string	新头像	base64格式的字符串

onChangeImg (e) {
    // 判断文件上传的长度,为0则没有选择图片
    if (e.target.files.length === 0) {
    // 没有选择图片
    } else {
        // 创建FileReader对象
        const reader = new FileReader()
        // 调用 readAsDataURL 函数，读取文件内容
        reader.readAsDataURL(e.target.files[0])
        // 监听onload文件读取事件,读取base64字符串放在reader的result属性上
        reader.onload = () => {
            // 赋值给data里的avatar
            this.avatar = reader.result
        }
    }
}