vue開發簡單上傳圖片功能
阿新 • • 發佈:2020-07-01
本文例項為大家分享了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上傳圖片程式碼更改 完整程式碼
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。