本文实例为大家分享了vue实现简单上传图片功能的具体代码，供大家参考，具体内容如下

vue简单的上传个图片的功能，主要代码：

<template><div class="plan_list"> <div class="plan_name Upload_name">企业logo</div> <div class='Upload'> <input type="file" name="pclogo" id="xdaTanFileImg" @change="xmTanUploadImg()" ref='box' accept="image/*"> <img src="../../static/img/Authentication/shxy.jpg" class="img-circle img-thumbnail img-responsive" id="avarimgs"> </div> </div></template> <script>export default { name: "feedShopping", data() { return {} }, methods: { //上传图片 xmTanUploadImg(){ var obj=this.$refs.box;//获取元素的dom var file = obj.files[0]; var reader = new FileReader(); reader.onload = function (e) { var img = document.getElementById("avarimgs");//获取图片id img.src = e.target.result;//给图片src路径赋值 //重要：这里可以把获取的src路径的 base64 格式的图片传给后端即可 } reader.readAsDataURL(file) },}<script> <style scoped>#avarimgs,#xdaTanFileImg{ width: 0.8rem; height: 0.8rem; border-radius: 0.1rem; margin: 0.1rem 0; float: right;}#xdaTanFileImg{ position: absolute; top: 0; right: 0; opacity: 0;}.Upload_name{ line-height: 1rem;} </style>

参照之前发布的 jquery上传图片代码更改 完整代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。