vue中input上传图片并显示在页面中

效果图

点击选择文件上传图片，图片显示在页面中。如果直接拿图片的名字是赋值不上去的，需要转换一下才可以渲染上去。
话不多说直接上代码：
HTML

<input @change="img($event)" type="file"><br>
<img :src="src">

JS

methods: {
    img(e) {
      let that = this;//改变this指向
      let files = e.target.files[0];//图片文件名
      if (!e || !window.FileReader) return; // 看是否支持FileReader
      let reader = new FileReader();
      reader.readAsDataURL(files); // 关键一步，在这里转换的
      reader.onloadend = function () {
        that.src = this.result;//赋值
      }
      let param = new FormData(); //转换为表单进行发送给后端
      param.append("imgFile", files); //第一个参数就是后端要接受的字段，要一样，不一样会发送失败
      this.$axios.post(this.$api.ip,param).then((data)=>{
      })
    }
 },

没了，结束了，是不是很简单呐，如有问题，欢迎留言。
如果此篇博文对您有帮助，还请动动小手点点关注 点点赞 收藏 ?留言 呐~，谢谢 ~ ~