前言:开发中经常遇到文件上传的场景,有时需要前端将文件内容读取出来再以base64格式传到接口。
目录
- FileReader
- 主要方法
- readAsArrayBuffer(blob)
- readAsText(blob, [encoding])
- readAsDataURL(blob)
- 主要事件
- React + antd Upload 组件示例
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: 返回读取文件的结果
读取文件的示例:
参考 https://blog.csdn.net/qq_60440599/article/details/136071142
<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格式与表单一起传给后端。
<UploadmaxCount={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();//将上传的文件读取成base64reader.readAsDataURL(file);reader.onloadend = function () {console.log('文件Base64内容',reader.result, file);};// 阻止上传,为了最后和表单一起提交return false;}}
><Button icon={<UploadOutlined />} type="primary">文件上传</Button>
</Upload>