vue里面怎么上传原图（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)=>{ }) } },

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