vue 小案例--图片上传

功能

• 实现图片上传
• 显示进度条

<template>
  <div class="about">
	  <div>
		  <div>
			  <img :src="'https://www.xxx.com'+item" alt="" 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>