本文實例為大家分享了vue實現簡單上傳圖片功能的具體代碼，供大家參考，具體內容如下

vue簡單的上傳個圖片的功能，主要代碼：

<template><div class='plan_list'> <div class='plan_name Upload_name'>企業logo</div> <div class=’Upload’> <input type='file' name='pclogo' @change='xmTanUploadImg()' ref=’box’ accept='image/*'> <img src='http://m.b3g6.com/static/img/Authentication/shxy.jpg' 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上傳圖片代碼更改 完整代碼

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。