我要评论filereader
filereader 是一个对象，允许 web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 file 或 blob 对象指定要读取的文件或数据。
构造函数：
let reader = new filereader(); // 没有参数
主要方法
readasarraybuffer(blob)
将数据读取为二进制格式的 arraybuffer。当读取操作完成时，readystate 变成 done（已完成），并触发 loadend 事件，同时 result 属性中将包含一个 arraybuffer 对象以表示所读取文件的数据。
reader.readasarraybuffer(blob)
readastext(blob, [encoding])
将数据读取为给定编码（默认为 utf-8 编码）的文本字符串。
instanceoffilereader.readastext(blob[, encoding]);
readasdataurl(blob)
读取二进制数据，并将其编码为 base64 的 data url。
reader.readasdataurl(blob);
读取方法都是异步的，也就是说只有当执行完成后才能够查看到结果，如果直接查看是无结果的，并返回 undefined。必须要挂载 实例下的 onload 或 onloadend 的方法才能处理转化后的结果
filereader的三个属性：
- error: 返回读取时的错误信息
- readystate: 返回操作的当前状态
- result: 返回读取文件的结果
读取文件的示例：
参考
<input type="file" onchange="readfile(this)">
<script>
function readfile(input) {
let file = input.files[0];
let filereader= new filereader();
filereader.readastext(file);
// 或者 filereader.readasarraybuffer(file)
/**
* 该方法在读取时调用
*/
filereader.onloadstart = () => {
console.log("开始读取")
console.log(filereader.readystate)//调用函数,但还没有结束,返回1
}
/**
* 该方法在读取成功时调用
*/
filereader.onload = () => {
console.log("读取成功")
console.log(filereader.result)
console.log(filereader.readystate)//调用完成,返回2
}
/**
* 该方法在读取结束时调用
*/
filereader.onloadend = () => {
console.log("读取结束")
}
/**
* 读取过程中触发
*/
filereader.onprogress = (e) => {
console.log("读取中")
//获取已经加载的数据量
console.log("loaded==>" + e.loaded)
}
/**
* 该方法在调用abort函数时触发
*/
filereader.onabort = () => {
console.log("操作终止")
}
//当读取出现失败时触发
filereader.onerror = () => {
console.log("出现错误")
console.log(filereader.error)
}
}
</script>
read 方法的选择tips：
readasarraybuffer—— 用于二进制文件，执行低级别的二进制操作。对于诸如切片（slicing）之类的高级别的操作，file 是继承自 blob 的，所以可以直接调用它们，而无需读取。readastext—— 用于文本文件，当我们想要获取字符串时。readasdataurl—— 用于在 src 中使用此数据，并将其用于img或其他标签时。还有一种用于此的读取文件的替代方案：
url.createobjecturl(file)。
示例：根据用户传入的图片文件,来生成一个对应的临时url,并将临时url作为src传给img标签
<input type="file" id="file">
<img id="img">
let file = document.getelementbyid("file")
let img= document.getelementbyid("img")
file.addeventlistener("change", (e) => {
let filelist=e.target.files
//先获取一份文件
//这里获取的才是file对象
let file = filelist[0]
//因为file也是blob对象,所以直接传入即可
img.src=url.createobjecturl(file)
})
主要事件
读取过程中，有以下事件：
- loadstart —— 开始加载。
- progress —— 在读取过程中出现，当filereader读取数据时，进度事件会定期触发。
- load —— 读取完成时触发，没有 error。
- abort —— 在中止读取时会触发 abort 事件：例如程序调用 abort()。。
- error —— 出现 error时触发。
- loadend —— 读取完成，无论成功还是失败。
读取完成后，可以通过以下方式访问读取结果：
- reader.result 是结果（如果成功）
- reader.error 是 error（如果失败）。
检测浏览器对 filereader 的支持：
if(window.filereader) {
var fr = new filereader();
// add your code here
}else {
alert("not supported by your browser!");
}
react + antd upload 组件示例
场景： 表单文件上传，读取后以base64格式与表单一起传给后端。
<upload
maxcount={1}
accept=".jpg,.jpeg,.png"
beforeupload={(file) => {
console.log('文件类型', file.type, file);
// 限制文件类型
const allowtypes = [
'image/png',
'image/jpeg',
'image/jpg',
];
const isallowtype = allowtypes.includes(file.type);
// 校验文件大小和类型
if (!isallowtype || file.size / 1024 / 1024 > 4) {
message.error('文件格式大小错误');
return upload.list_ignore;
}
const reader = new filereader();
//将上传的文件读取成base64
reader.readasdataurl(file);
reader.onloadend = function () {
console.log('文件base64内容',reader.result, file);
};
// 阻止上传，为了最后和表单一起提交
return false;
}}
>
<button icon={<uploadoutlined />} type="primary">
文件上传
</button>
</upload>总结
到此这篇关于js前端文件读取filereader操作方法总结的文章就介绍到这了,更多相关js前端文件读取filereader内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论