什么是FileReader对象以及如何使用它

找出什么是FileReader对象以及如何使用它

FileReader 对象异步地读取一个文件的内容。

它暴露了那4个阅读方法，我们可以用来启动一个阅读过程。

• readAsText()
• readAsDataURL()
• readAsArrayBuffer()
• readAsBinaryString()

和一个abort() 方法来停止任何阅读操作。

读取文件是异步的，该对象暴露了几个事件，我们可以挂钩来跟踪操作的进展。

• onload 读取成功结束时触发
• onloadstart 读取开始时被触发
• onprogress 读取正在进行时触发
• onloadend 读取结束时触发，成功或不成功
• onerror 发生错误时触发
• onabort 读取被终止时触发

一旦读取操作完成，FileReader的result 属性包含文件内容。

如果发生错误，error 属性包含错误信息，readyState 包含操作的状态 -0 如果没有加载数据，1 如果正在加载数据，2 如果加载完成。

readAsText()

将blob的内容加载到一个文本字符串中。

在这个例子中，我们使用该文本并将其放入#content 元素的内部HTML中。

//..file is available as a blob

const reader = new FileReader()

reader.onload = event => {
	const text = reader.result
  document.getElementById('content').innerHTML = text
}

reader.onerror = (e) => {
  console.error(e)
}

reader.readAsText(file)

下面是一个例子，当使用input 元素上传文本文件时读取其内容，并将其内容打印到控制台。

<input type="file" allow="text/*" />

const input = document.querySelector('input')

input.addEventListener('change', e => {
	const reader = new FileReader()

	reader.onload = event => {
	  const text = reader.result
	  console.log(text)
	}

	reader.onerror = (e) => {
	  console.error(e)
	}

	reader.readAsText(input.files[0])
})

readAsDataURL()

将一个blob的内容加载到一个数据URL中。

//..file is available as a blob

const reader = new FileReader()

reader.onload = event => {
	const dataURL = event.target.result
  document.getElementById('image').src = dataURL
}

reader.readAsDataURL(file)

readAsArrayBuffer()

将一个blob的内容加载到一个 ArrayBuffer.

//..file is available as a blob

const reader = new FileReader()

reader.onload = event => {
	const buffer = reader.result
	const data = new Int32Array(buffer)
	//...
}

reader.onerror = (e) => {
  console.error(e)
}

reader.readAsArrayBuffer(file)