FileReader
FileReader 允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数。
属性
属性 | 说明 | 返回值 |
---|---|---|
readyState | 提供 FileReader 读取操作时的当前状态。 | Number 。0:还没有加载任何数据;1:数据正在被加载;2:已完成全部的读取请求 |
result | 返回文件的内容。只有在读取操作完成后,此属性才有效 | 一个字符串或者一个ArrayBuffer(取决于使用哪种读取方法) |
error | 返回读取文件时的错误信息 | DOMError |
事件处理
事件 | 说明 |
---|---|
onloadstart | 读取操作开始时触发 |
onprogress | 读取时触发 |
onload | 读取操作完成时触发 |
onloadend | 在读取操作结束时触发(可能是成功,可能是失败) |
onabort | 读取操作被中断时触发 |
onerror | 读取操作发生错误时触发 |
结合事件处理函数,看看各阶段的 readyState :
<input id="test" type="file" onchange="getFile" />
function getFile(){
const file = document.querySelector('#test').files[0];
const reader = new FileReader();
console.log("readyState = ", reader.readyState)
reader.onloadstart = ()=>{
console.log("onloadstart readyState = ", reader.readyState) }
reader.onprogress = ()=>{
console.log("onprogress readyState = ", reader.readyState) }
reader.onload = ()=>{
console.log("onload readyState = ", reader.readyState) }
reader.onloadend = ()=>{
console.log("onloadend readyState = ", reader.readyState) }
reader.readAsDataURL(file);
}
输出结果:
方法
方法 | 说明 |
---|---|
abort | 取消 FileReader 的读取操作,触发之后 readyState 为已完成(DONE) |
readAsArrayBuffer | 将 Blob 或 File 读取为 ArrayBuffer 对象 |
readAsBinaryString | 将 Blob 或 File 读取为文件原始二进制格式 |
readAsDataURL | 将 Blob 或 File 读取为 data:URL格式的字符串(base64编码) |
readAsText | 将 Blob 或 File 读取为内容(字符串形式) |
readAsArrayBuffer
、readAsBinaryString
、readAsDataURL
、readAsText
这四个方法都是:
- 接收 Blob 或 File 对象
- 读取完成时,readyState 变成 DONE(已完成)
- 触发 loadend 事件
- 读取结果在 result 属性中
这四个方法的读取结果都长啥样啊?我分别准备了一个 test.txt(放了些假文) 和 一个 test.png 进行测试,输出结果如下:
readAsArrayBuffer
readAsBinaryString
readAsDataURL
readAsText
测试代码:
<!-- Vue -->
<template>
<div id="fileUpload">
<h1>测试方法: {
{readType}}</h1>
<h4>
读取txt文件:
<input id="txt" type="file" @change="getFile('txt')" />
</h4>
<h4>
读取jpg文件:
<input id="jpg" type="file" @change="getFile('jpg')" />
</h4>
<div style="margin-top:20px;">
<button style="margin:5px;" @click="setReadType('readAsArrayBuffer')" > readAsArrayBuffer </button>
<button style="margin:5px;" @click="setReadType('readAsBinaryString')" > readAsBinaryString </button>
<button style="margin:5px;" @click="setReadType('readAsDataURL')" > readAsDataURL </button>
<button style="margin:5px;" @click="setReadType('readAsText')" > readAsText </button>
</div>
</div>
</template>
<script>
export default {
name: "fileUpload",
data() {
return {
readType:'readAsArrayBuffer'
};
},
methods: {
setReadType(type){
this.readType = type;
document.querySelector('#txt').value = '';
document.querySelector('#jpg').value = '';
},
getFile(type){
const file = document.querySelector(`#${
type}`).files[0];
const reader = new FileReader();
reader.onload = ()=>{
console.log(`读取.${
type} 结果如下:`,reader.result);
this[`${
type}Res`] = reader.result;
}
reader[this.readType](file);
}
}
};
</script>
参考链接:
MDN:https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader