vue開發(fā)簡單上傳圖片功能
更新時間：2020年06月30日 08:26:20 作者：qq_42221334
這篇文章主要為大家詳細(xì)介紹了vue開發(fā)簡單上傳圖片功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue實現(xiàn)簡單上傳圖片功能的具體代碼，供大家參考，具體內(nèi)容如下
vue簡單的上傳個圖片的功能，主要代碼：
<template>
<div class="plan_list">
<div class="plan_name Upload_name">企業(yè)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>
參照之前發(fā)布的 jquery上傳圖片代碼更改 完整代碼
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue-cli中post請求發(fā)送Json格式數(shù)據(jù)方式
這篇文章主要介紹了Vue-cli中post請求發(fā)送Json格式數(shù)據(jù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue.js?diff算法原理詳細(xì)解析，diff算法可以看作是一種對比算法，對比的對象是新舊虛擬Dom。顧名思義，diff算法可以找到新舊虛擬Dom之間的差異，但diff算法中其實并不是只有對比虛擬Dom，還有根據(jù)對比后的結(jié)果更新真實Dom2022-06-06
vue如何限制只能輸入正負(fù)數(shù)及小數(shù)
這篇文章主要介紹了vue如何限制只能輸入正負(fù)數(shù)及小數(shù),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了微信小程序使用uni-app一鍵獲取用戶信息,需要的朋友可以參考下2023-01-01
使用Vue+MySQL實現(xiàn)登錄注冊的實戰(zhàn)案例
第一次用Vue+MySQL實現(xiàn)注冊登錄功能,就已經(jīng)踩了很多坑,下面這篇文章主要給大家介紹了關(guān)于使用Vue+MySQL實現(xiàn)登錄注冊案例的相關(guān)資料,需要的朋友可以參考下2022-05-05
本文主要介紹了vue實現(xiàn)接口封裝的實現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-11-11
如何使用Webstorm和Chrome來調(diào)試Vue項目
這篇文章主要介紹了如何使用Webstorm和Chrome來調(diào)試Vue項目，對Vue感興趣的同學(xué)，一定要看一下2021-05-05
vue2項目實現(xiàn)自定義右鍵菜單,可添加圖標(biāo)、事件等方式
這篇文章主要介紹了vue2項目實現(xiàn)自定義右鍵菜單,可添加圖標(biāo)、事件等方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
cross-env 是一個非常實用的 Node.js 包,它允許你跨平臺（Windows, macOS, Linux）使用環(huán)境變量,這對于在不同的操作系統(tǒng)上運(yùn)行腳本時保持一致性非常有用,這篇文章主要介紹了vue cross-env使用和配置方法,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了vue中使用GraphQL的實例代碼,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-11-11