标签：pre vue color res 100px data 案例 file 上传

功能

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

<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>

标签：pre,vue,color,res,100px,data,案例,file,上传
来源： https://blog.csdn.net/hhhhhhhhhtr/article/details/107006328

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。