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