上传图片时如何在前端限制图片的大小，获取图片的名称

首先，上传的表单为：

<el-form-item label="*商品图片：">
	<p>上传商品首页广告轮播图，您最多可以上传6张图片，每张图片大小不可超过200kb，默认第一张为商品主图封面。</p>
	<p>建议上传至少3张以上，推荐使用500*500像素的真实图片，支持jpg，jepg，png，gif，bmp格式。</p>
	<div class="preImgDiv" v-for="item in imgs">
		<img :src="item" width="100%" height="100%">
		<i class="el-icon-delete delIcon" @click="removePic(item)"></i>
	</div>
	<div class="el-upload el-upload--picture-card" @click="addPic()" v-show="addPicHide">
		<i class="el-icon-plus"></i>
		<input type="file" name="file" id="picUpload" style="display:none;" @change="changeImage($event)" multiple="multiple">
	</div>
</el-form-item>

绑定的上传图片的方法有：addPic()、changeImage($event)  （这里只是讲上传）

addPic(){
	document.getElementById('picUpload').click();
},


---------------------------------------------

changeImage(e){  //e为变化的节点
	var url10 = this.url10;
	var that = this;
	var file = e.target.files;
	//console.log('File',file);
	var param = new FormData(); //创建form对象
	var errorArr = [];
	for(var i=0;i<file.length;i++){  //同时上传多张图片
		//判断图片大小
		const size200k = file[i].size  / 1024 < 200;
		if(!size200k){
			 errorArr.push(file[i].name);
		}else{
			param.append('imgFiles',file[i]);
		}
	}
	let arrorStr = '';
	if(errorArr.length > 0){
		for(var i=0;i<errorArr.length;i++){
			arrorStr += errorArr[i];
			if(i != errorArr.length-1){
				arrorStr += '，';
			}
		}	
	}
	if(arrorStr != ''){
		this.$message.error('图片【' + arrorStr + '】大小超过 200kb,已经限制上传!');
	}
	
	var Length = file.length + this.imgs.length;
	  if(Length == 6){
		this.addPicHide = false;
	  } else {
		this.addPicHide = true;
	  }
	
	  if(Length>6){
		this.$message({
		  message: '不能超过6张', type: 'warning', showClose: true, duration: 1000
		});
		return false;
	  }

	axios.post(url10, param, {
	  headers: {
		"Content-Type": "multipart/form-data"
	  }
	}).then(res=>{
		//console.log(res.data.data);
		var data = res.data.data;
		for(var i=0;i<data.length;i++){
			that.imgs.push(data[i]);
		}
	}).catch(e=>{
		console.log(e);
	})
},

removePic(url){
	var imgs = this.imgs;
	var imgs = this.imgs;
	if(imgs.length - 1 == 6){
	this.addPicHide = false;
	} else {
	this.addPicHide = true;
	}
	for(var i in imgs){
		if(imgs[i] == url) imgs.splice(i,1);
		this.imgs = imgs;
	}
},

本项目采用的前端组件是vue，希望能够帮助到大家。感谢各位大神点击右上角关注我。