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

偏执的太偏执、 2022-05-18 06:28 235阅读 0赞

首先，上传的表单为：

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