vue图片上传之初识base64

template

    <img class="img" :src="avatar">
    <input type="file" @change="upimg" />

js

export default{
  data() {
    return {
        avatar: ""
    }
  },
  methods:{
     upimg(e) {
       const _self = this;
       var files = e.target.files[0];
       if (!e || !window.FileReader) return; // 看支持不支持FileReader
       let reader = new FileReader();
       reader.readAsDataURL(files); // 这里是最关键的一步，转换就在这里
       reader.onloadend = function() {
          //  这个时候_self.avatar中存的就是编码过后的图片了
         _self.avatar = this.result;
       };
     }
  }
}