说明
1：FileReader : 读取文件内容
readAsText() 读取文本文件，(可以使用Txt打开的文件)
readAsBinaryString(): 读取任意类型的文件，返回二进制字符串
readAsDataURL: 方法可以将读取到的文件编码成DataURL ，可以将资料(例如图片)内嵌在网页之中，不用放到外部文件
abort: 中断读取
2：FileReader 提供一个完整的事件模型，用来捕获读取文件的状态
onabort:读取文件断片时触发
onerror:读取文件错误时触发
onload:文件读取成功时触发
onloadend:文件读取完毕之后，不管成功还是失败触发
onloadstart: 开始读取文件时触发
onprogress:读取文件过程中触发
3：FileReader 中的readAsDataURL 选择图片文件后即使预览图片
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文件上传</title>
</head>
<body>
<input type="file" accept="image/png,image/*" onchange="changefile(this)" placeholder="请选择图片">
<img width="300px" src="" alt="">
</body>
<script>
function changefile(img) {
// 生成一个文件读取的对象
const reader = new FileReader();
//发起异步读取文件请求，读取结果为data:url的字符串形式，前台预览
reader.readAsDataURL(img.files[0]);
//读取成功后
reader.onload = function (ev) {
// base64码
var imgFile = ev.target.result; //或e.target都是一样的
document.querySelector("img").src = ev.target.result;
}
}
</script>
</html>
效果图
image.png
element-ui转base64 （将file改成res）
https://www.cnblogs.com/hellofangfang/p/13366489.html
HTML5文档
https://www.html5plus.org/doc/zh_cn/accelerometer.html
https://www.html.cn/doc/html5/start/
原理将file对象转base64
image.png
网友评论