Vue结合FIleReader实现图片上传前的预览

FIleReader，图片预览

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

实现图片预览功能。

说明

方法名	参数	描述
abort	none	中断读取
readAsBinaryString	file	将文件读取为二进制码
readAsDataURL	file	将文件读取为 DataURL
readAsText	file, [encoding]	将文件读取为文本

事件	描述
onabort	中断时触发
onerror	出错时触发
onload	文件读取成功完成时触发
onloadend	读取完成触发，无论成功或失败
onloadstart	读取开始时触发
onprogress	读取中

• FileReader.readyState
  表示 FileReader 状态的数字，取值如下
  0：EMPTY/还没有加载任何数据
  1：LOADING/数据正在被加载
  2：DONE/已完成全部的读取请求
• FileReader.result
  文件的内容。该属性仅在读取操作完成后才有效。
• FileReader.error

主要使用： FileReader.onload 事件及 FileReader.readAsDataURL() 方法

FileReader.onload
处理 load 事件。该事件在读取操作完成时触发
FileReader.readAsDataURL()
开始读取指定的 Blob 中的内容。一旦完成，result 属性中将包含一个 data: URL 格式的字符串以表示所读取文件的内容。

// 继续使用上文的fileList
let file = fileList[0]
const fileReader = new FileReader()
fileReader.readAsDataURL(file) //读取图片
fileReader.addEventListener('load', function() {
  // 读取完成
  let res = fileReader.result
  // res是base64格式的图片
  img.src = res
})

将返回值直接设置成Dom的src即可