前端获取上传图片的base64

直接贴代码

html:

<div class="upload">
     <input type="file" autocomplete="off" placeholder="选择上传文件" class="uploadFile" @change="File"></input>   
</div>

js:

File(event){
      let reader = new FileReader();
      reader.onload = function(e) {
        console.log(e.target.result);
      }
      reader.readAsDataURL(document.querySelector("input[type=file]").files[0]);
    }

css:

.upload{
  width: 400px;
  height: 90px;
  border: solid 1px #EBEBEB;
}
.uploadFile{
  width: 400px;
  height: 90px;
  opacity: 0;
}

效果:

 原理:通过$event获取文件流,借助FileReader来获取上传图片的base64,FileReader = NB

但是如果你使用的是vue的通过this.message = e.target.result来传参的话可能会导致function(e)内无法识别this,导致base64参数无法抛出.这里使用ES6语法箭头函数就可以了:

methods:{
  File(event){
      let reader = new FileReader();
      reader.onload = e => {
        console.log(e.target.result);
        this.message = e.target.result
      }
      console.log(this.message) //此处打印为空,因为在File函数内会产生异步,此处先打印了message,然后才执行上面的this.message = e.target.result给message赋值
      reader.readAsDataURL(document.querySelector("input[type=file]").files[0]);
    }
},
data(){
    result{
        message:''
    }
}

message已经被赋值了,但是也要注意异步执行问题,别误以为没有赋值[代码执行顺序并不是你写的代码上下顺序]