图片格式的转变与文件读取

本文已参与 「新人创作礼」活动, 一起开启掘金创作之路。

    // change 事件
    changeClick (e) {
      //   change 事件发生改变的 e.target.files 就是这张图片的信息
      const fs = e.target.files
      // 然后判断 fs 为 0 的时候那么里面就没有图片
      if (fs.length === 0) {
        // 那么就把装图片的为空
        this.avatar = ''
      } else {
        const bas = new FileReader()
        // new 出来的有一个 readAsDataURL 属性可以把图片的格式转成 bas64 格式的
        bas.readAsDataURL(fs[0])
        // 然后用 onload 事件传给自己定义的变量
        bas.onload = e => {
          console.log(e)

          this.avatar = e.target.result
        }
      }
    }
    
    // 第二种实现方法
// 实现图片的预览 (base64 图片地址 URL)
        // 浏览器里有一个内置的属性 URL.createObjectURL(fls[0]) 图片地址 URL
        this.$refs.imgRef.src = URL.createObjectURL(fls[0])