FileReader

​​FileReader​​​ 对象允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 ​​File​​​ 或 ​​Blob​​ 对象指定要读取的文件或数据。

其中 File 对象可以是来自用户在一个​​<input>​​元素上选择文件后返回的​​FileList​​对象，也可以来自拖放操作生成的 ​​DataTransfer​​对象，还可以是来自在一个​​HTMLCanvasElement​​上执行​​mozGetAsFile()​​方法后返回结果。

重要提示：​​ FileReader​​​ 仅用于以安全的方式从用户（远程）系统读取文件内容 它不能用于从文件系统中按路径名简单地读取文件。要在 ​​JavaScript​​​ 中按路径名读取文件，应使用标准 ​​Ajax​​​ 解决方案进行服务器端文件读取，如果读取跨域，则使用 ​​CORS​​ 权限。


构造函数

  • ​​FileReader()​​​ 返回一个新构造的​​FileReader​​。


属性

  • ​​FileReader.error​​ 只读
    一个DOMException，表示在读取文件时发生的错误 。
  • ​FileReader.readyState​​ 只读
    表示FileReader状态的数字。取值如下：

常量名

值

描述

​​EMPTY​​

​​0​​

还没有加载任何数据。

​​LOADING​​

​​1​​

数据正在被加载。

​​DONE​​

​​2​​

已完成全部的读取请求。

  • ​​FileReader.result​​​ 只读
    文件的内容。该属性仅在读取操作完成后才有效，数据的格式取决于使用哪个方法来启动读取操作。


事件处理

  • ​​FileReader.onabort​​处理abort (en-US)事件。该事件在读取操作被中断时触发。
  • ​​FileReader.onerror​​处理error (en-US)事件。该事件在读取操作发生错误时触发。
  • ​​FileReader.onload​​处理load (en-US)事件。该事件在读取操作完成时触发。
  • ​​FileReader.onloadstart​​处理loadstart (en-US)事件。该事件在读取操作开始时触发。
  • ​​FileReader.onloadend​​处理loadend (en-US)事件。该事件在读取操作结束时（要么成功，要么失败）触发。
  • ​​FileReader.onprogress​​处理progress (en-US)事件。该事件在读取Blob时触发。

备注：  因为 ​​FileReader​​​ 继承自​​EventTarget​​​，所以所有这些事件也可以通过​​addEventListener​​方法使用。


方法

  • ​​FileReader.abort()​​中止读取操作。在返回时，readyState属性为DONE。
  • ​​FileReader.readAsArrayBuffer()​​开始读取指定的Blob中的内容，一旦完成，result 属性中保存的将是被读取文件的 ArrayBuffer数据对象。
  • ​​FileReader.readAsBinaryString()​​ 非标准
    开始读取指定的Blob中的内容。一旦完成，result属性中将包含所读取文件的原始二进制数据。
  • ​FileReader.readAsDataURL()​
    开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL 格式的 Base64 字符串以表示所读取文件的内容。
  • ​​FileReader.readAsText()​​​开始读取指定的​​Blob​​​中的内容。一旦完成，​​result​​属性中将包含一个字符串以表示所读取的文件内容。


封装读取文件方法

const fileToDataURL = (file: Blob): Promise<any> => {
  return new Promise((resolve) => {
    const reader = new FileReader()
    reader.onloadend = (e) => resolve((e.target as FileReader).result)
    reader.readAsDataURL(file)
  })
}


然后将文件流转成图片.


Image()

**​​Image()​​​**函数将会创建一个新的​​HTMLImageElement​​实例。

它的功能等价于 ​​document.createElement('img')​​


语法

Image(width, height)

参数

  • width
    图片的宽度 (即width 属性).
  • height
    图片的高度 (即​​height​​ 属性).


封装将文件流转成图片方法

const dataURLToImage = (dataURL: string): Promise<HTMLImageElement> => {
  return new Promise((resolve) => {
    const img = new Image()
    img.onload = () => resolve(img)
    img.src = dataURL
  })
}

关于canvas封装

const canvastoFile = (canvas: HTMLCanvasElement, type: string, quality: number): Promise<Blob | null> => {
  return new Promise((resolve) => canvas.toBlob((blob) => resolve(blob), type, quality))
}

最后就是整合成一个异步的图片压缩方法

const fileToDataURL = (file: Blob): Promise<any> => {
  return new Promise((resolve) => {
    const reader = new FileReader()
    reader.onloadend = (e) => resolve((e.target as FileReader).result)
    reader.readAsDataURL(file)
  })
}
const dataURLToImage = (dataURL: string): Promise<HTMLImageElement> => {
  return new Promise((resolve) => {
    const img = new Image()
    img.onload = () => resolve(img)
    img.src = dataURL
  })
}
const canvastoFile = (canvas: HTMLCanvasElement, type: string, quality: number): Promise<Blob | null> => {
  return new Promise((resolve) => canvas.toBlob((blob) => resolve(blob), type, quality))
}
/**
 * 图片压缩方法
 * @param {Object}  file 图片文件
 * @param {String} type 想压缩成的文件类型
 * @param {Nubmber} quality 压缩质量参数
 * @returns 压缩后的新图片
 */
export const compressionFile = async(file, type = 'image/jpeg', quality = 0.5) => {
  const fileName = file.name
  const canvas = document.createElement('canvas')
  const context = canvas.getContext('2d') as CanvasRenderingContext2D
  const base64 = await fileToDataURL(file)
  const img = await dataURLToImage(base64)
  canvas.width = img.width
  canvas.height = img.height
  context.clearRect(0, 0, img.width, img.height)
  context.drawImage(img, 0, 0, img.width, img.height)
  const blob = (await canvastoFile(canvas, type, quality)) as Blob // quality:0.5可根据实际情况计算
  const newFile = await new File([blob], fileName, {
    type: type
  })
  return newFile
}