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)方式
這篇文章主要介紹了詳解Nuxt內(nèi)導航欄的兩種實現(xiàn)方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-04-04
Pure admin-Router標簽頁配置與頁面持久化實現(xiàn)方法詳解
這篇文章主要介紹了Pure admin-Router標簽頁配置與頁面持久化實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧
2023-01-01
vue2首次加載屏幕閃爍問題
這篇文章詳細介紹了Vue.js項目的基本結構和執(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)權限控制實現(xiàn)方案
本篇文章主要介紹了詳解基于vue-router的動態(tài)權限實現(xiàn)方案，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
vue中實現(xiàn)頁面刷新以及局部刷新的方法
這篇文章主要給大家介紹了關于vue中實現(xiàn)頁面刷新以及局部刷新的相關資料,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2022-01-01
vue3引入uview-plus3.0移動組件庫的流程
這篇文章主要介紹了vue3引入uview-plus3.0移動組件庫的流程,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-06-06
Vue生成隨機卡密并綁定到表單輸入框的實現(xiàn)技巧
在現(xiàn)代Web應用中,隨機生成驗證碼、卡密等是一項常見需求,對于開發(fā)人員來說,如何在表單中快速生成一個符合格式的隨機卡密,并與其他表單字段一同提交,是一個常見的場景,本篇文章將詳細介紹如何在Vue.js框架中實現(xiàn)一個隨機卡密生成功能,需要的朋友可以參考下
2024-11-11
vue實現(xiàn)彈幕功能
這篇文章主要介紹了vue實現(xiàn)彈幕功能,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-10-10
使用vite兼容低端瀏覽器配置
這篇文章主要介紹了使用vite兼容低端瀏覽器配置方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-05-05
vue獲取token(設置token,清除token)實現(xiàn)登錄方式
這篇文章主要介紹了vue獲取token(設置token,清除token)實現(xiàn)登錄方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09