vue開(kāi)發(fā)簡(jiǎn)單上傳圖片功能
更新時(shí)間：2020年06月30日 08:26:20 作者：qq_42221334
這篇文章主要為大家詳細(xì)介紹了vue開(kāi)發(fā)簡(jiǎn)單上傳圖片功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue實(shí)現(xiàn)簡(jiǎn)單上傳圖片功能的具體代碼，供大家參考，具體內(nèi)容如下
vue簡(jiǎn)單的上傳個(gè)圖片的功能，主要代碼：
<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上傳圖片代碼更改 完整代碼
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
詳解Nuxt內(nèi)導(dǎo)航欄的兩種實(shí)現(xiàn)方式
這篇文章主要介紹了詳解Nuxt內(nèi)導(dǎo)航欄的兩種實(shí)現(xiàn)方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
Pure admin-Router標(biāo)簽頁(yè)配置與頁(yè)面持久化實(shí)現(xiàn)方法詳解
這篇文章主要介紹了Pure admin-Router標(biāo)簽頁(yè)配置與頁(yè)面持久化實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-01-01
這篇文章詳細(xì)介紹了Vue.js項(xiàng)目的基本結(jié)構(gòu)和執(zhí)行流程,包括index.html、main.js、App.vue和路由配置的關(guān)系,特別強(qiáng)調(diào)了在index.html中設(shè)置BASE_URL和cdn的使用,以及在main.js中使用render函數(shù)來(lái)減少打包體積2025-01-01
詳解基于vue-router的動(dòng)態(tài)權(quán)限控制實(shí)現(xiàn)方案
本篇文章主要介紹了詳解基于vue-router的動(dòng)態(tài)權(quán)限實(shí)現(xiàn)方案，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
vue中實(shí)現(xiàn)頁(yè)面刷新以及局部刷新的方法
這篇文章主要給大家介紹了關(guān)于vue中實(shí)現(xiàn)頁(yè)面刷新以及局部刷新的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-01-01
vue3引入uview-plus3.0移動(dòng)組件庫(kù)的流程
這篇文章主要介紹了vue3引入uview-plus3.0移動(dòng)組件庫(kù)的流程,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-06-06
Vue生成隨機(jī)卡密并綁定到表單輸入框的實(shí)現(xiàn)技巧
在現(xiàn)代Web應(yīng)用中,隨機(jī)生成驗(yàn)證碼、卡密等是一項(xiàng)常見(jiàn)需求,對(duì)于開(kāi)發(fā)人員來(lái)說(shuō),如何在表單中快速生成一個(gè)符合格式的隨機(jī)卡密,并與其他表單字段一同提交,是一個(gè)常見(jiàn)的場(chǎng)景,本篇文章將詳細(xì)介紹如何在Vue.js框架中實(shí)現(xiàn)一個(gè)隨機(jī)卡密生成功能,需要的朋友可以參考下2024-11-11
這篇文章主要介紹了vue實(shí)現(xiàn)彈幕功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-10-10
這篇文章主要介紹了使用vite兼容低端瀏覽器配置方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05
vue獲取token(設(shè)置token,清除token)實(shí)現(xiàn)登錄方式
這篇文章主要介紹了vue獲取token(設(shè)置token,清除token)實(shí)現(xiàn)登錄方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09