本文例項為大家分享了vue實現簡單圖片上傳的具體程式碼，供大家參考，具體內容如下

功能

• 實現圖片上傳
• 顯示進度條
  

<template>
 <div class="about">
 <div>
 <div>
  <img :src="'https://www.xxx.com'+item" alt="vue實現簡單圖片上傳" v-for="item in pics" >
 </div>
 <label><input type="file" ref="file" @change="up()">+<span class="label" :style="{width:pre+'%'}"></span></label>
 </div> 
 </div>
</template>
<style scoped="scoped">
 label{
 width: 100px;
 height: 100px;
 display: inline-block;
 overflow: hidden;
 background-color: #CCCCCC;
 color: #FFFFFF;
 font-size: 48px;
 text-align: center;
 line-height: 100px;
 position: relative;
 }
 input{display: none;}
 .label{
 position: absolute;
 display: inline-block;
 bottom: 0;
 left: 0;
 height: 2px;
 width: 0%;
 background-color: #FFA500; 
 }
 
</style>
<script>
 export default{
 name: 'About',data(){
 return{
  pics:[],pre:0,}
 },methods:{
 up(){
 var that=this;
 var file=this.$refs.file.files[0];
 var data=new FormData();
 data.append("file",file);
 this.$http.post("https://www.xxx.com/ajax/file.php",data,{
  onUploadProgress:e=>{
  this.pre=e.loaded/e.total*100
  console.log("+++",e)
  }
 })
 .then(res=>{
  if(res.data.error==0){
  this.pics.push(res.data.pic)
  console.log("----",res)
  }
  
 })
 .catch(err=>{
  console.log(err)
 })
 this.pre=0
 },}
 }
</script>

關於vue.js元件的教程，請大家點選專題vue.js元件學習教程進行學習。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。