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

功能

<template> <div class='about'> <div> <div> <img :src='http://www.cgvv.com.cn/bcjs/’https://www.xxx.com’+item' alt='' v-for='item in pics' > </div> <label><input type='file' ref='file' @change='up()'>+<span :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組件學習教程進行學習。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。