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

首先，上传的表单为：

[code]<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)  （这里只是讲上传）

[code]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，希望能够帮助到大家。感谢各位大神点击右上角关注我。