JavaScript实现文件读写操作简记

File对象类型

• <input>元素上选择文件后返回的FileList对象
• 拖放操作生成的DataTransfer对象
  • 包含一个在数据传输上所有可用的本地文件列表。如果拖动操作不涉及拖动文件，此属性是一个空列表
  • 可做拖动上传文件
• HTMLCanvasElement上执行mozGetAsFile()方法后返回结果
  • 返回一个File对象,表示了包含在该canvas中的图片文件,这个文件是存在于内存中的.还可以指定名称和图片类型,如果没有指定type参数,则默认使用image/png.

FileReader

• 异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容
• 使用 File 或 Blob 对象指定要读取的文件或数据
• 在 Web Worker 中可用

读取流程

1. 获取File对象
2. reader = new FileReader()
3. 指定读取方式 FileReader.readAsArrayBuffer() | FileReader.readAsBinaryString() | FileReader.readAsDataURL() | FileReader.readAsText()
4. 处理abort|error|load等事件，load事件可获取e.target.result,获取读取后的结果

下载

转blob对象下载

const blob = new Blob([str]);
return URL.createObjectURL(blob);