前端 js 读取上传文件 - FileReader

前言

前端通过 标签可以进行文件的读取，例如读取上传图片文件信息等，再对其进行进一步的操作。这时可以用到 FileReader 接口来进行文件数据的处理。

---

FileReader 的方法

1. abort() - 可用于中止读取
2. readAsArrayBuffer() - 读取文件并且将一个包含文件内容的ArrayBuffer保存咋result属性中。
3. readAsBinaryString() - 读取文件并且把文件以字符串保存在result属性中。
4. readAsDataURL() - 读取文件并且将文件以数据URI的形式保存在result属性中。
5. readAsText() - 以纯文本形式读取文件，读取到的文本保存在result属性中。

FileReader 事件

1. onabort - 读取被中止时触发
2. onerror - 读取发生错误时触发
3. onload - 读取完成后触发
4. onloadend - 读取结束后触发, 无论成功还是失败
5. onloadstart - 读取操作将要开始之前调用
6. onprogress - 读取过程中周期性触发（可用用于实现进度条）

用例

<input type="file" id="input" />

<script>
	let ele = document.getElementById('input')

	ele.onchange = function (e) {
		let files = e.target.files // 获取上传的文件集合
		console.log('files: ', files)
		let file = files[0] // 获取第一个文件
		console.log('file: ', file)

		let render = new FileReader()

		// 异步事件
		render.onload = function (et) {
			console.log('et: ', et)

			/*
			* 这里可以获取到转为base64格式的文件，
			* 可以将文件绘制于canvas或者将base64格式的文件传给后台
			 */
			let result = et.target.result
			console.log('result: ', result)
		}

		render.readAsDataURL(file)
	}
</script>