图片文件转base64格式_实现页面预览

基于 FileReader 把文件读取为 base64 的字符串：

fileChange (e) {
      // console.log(e.target.files)
      if (e.target.files.length === 0) {
        // 没有选择图片
        this.avatar = ''
      } else {
        // 创建 fr 对象---FileReader构造函数
        const fr = new FileReader()
        // 读取文件
        fr.readAsDataURL(e.target.files[0])
        // 监听加载事件,读取成功后执行里面的回调
        fr.onload = () => {
        // 将结果赋给xxx
          this.avatar = fr.result
        }
      }
    },

思路：

        给input设置change改变事件

• 1设置一个变量接收转换的数据
• 2拿到事件目标,里面有个方法e.target.files是个伪数组.通过e.target.files.length判断用户是否选择了图片
• 3通过new FileReader拿到一个实例
• 4通过 实例名.readAsDataURL 将图片转成base64格式
• 5onload可以监听转换完成后/给声明变量赋