前端获取上传图片的base64

最新推荐文章于 2024-04-24 14:16:41 发布

原创最新推荐文章于 2024-04-24 14:16:41 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #开发语言 #html #css

本文介绍了如何在Vue应用中使用FileReader API处理用户上传的文件，重点讲解了如何通过箭头函数解决在事件回调中`this`指向问题，并提醒读者注意异步操作可能导致的逻辑顺序问题。

直接贴代码

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:''
    }
}