前端选择图片后纯前端预览

应用场景：在上传图片文件时，需要对选取的图片进行预览。

实现：首先，需要拿到用户选择的文件（数组形式），

const files = e.target.files  // 拿到用户选择的文件数组，e为原生的事件对象

由于img标签里的src的值只能为：

① 图片的链接地址（外链：http://xxxxxx, 图片相对路径）

②图片的base64字符串（格式：data:image/png:base64,字符码）

解决方法：

① 将文件转换为内存的临时地址(这个地址只能在JS内存里,无法传给后台)

        语法:URL.createObjecURL(文件)

this.avatar = URL.createObjectURL(files[0])   // avatar是给data里的值，绑定在src上

② 将文件转换为base64字符串（此字符串可以传给后台）

const fr = new FileReader()
fr.readAsDataURL(files[0])   // 传入文件对象开始读
fr.onload = (e) => {         // onload等待把文件读成base64文件
    // e.target.result的值就是读完的结果
    this.avatar = e.target.result
}

使用到了HTML5定义的FileReader作为文件API的重要成员用于读取文件，根据W3C的定义，FileReader接口提供了读取文件的方法和包含读取结果的事件模型。

readAsDataURL：将文件读成为base64的字符串。

详细使用可以参考HTML5之FileReader的使用