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
}
}
}