elementui上传图片，到达最大数量隐藏上传按钮，判断文件格式是不是png jpg，文件最大5m

html 复制代码

<el-upload action="https://***" 
	:headers="upheaders" :limit="1" list-type="picture-card"
	:on-preview="handlePreview" :on-remove="handleRemove" :on-change="handleChange"
	:on-success="handleSuccess" :on-error="handleError"  :data="uplistdata"
	:file-list="fileList" :class="{hide:uploadDisabled}" 
    :before-upload="beforeAvatarUpload"  ref="upload">
	<i class="el-icon-plus"></i> <br>
	<span class="teacher_el_upload_btn" @click="submitUpload">点击上传照片</span>
</el-upload>

action：请求地址

headers：请求头

limit：上传图片最大数量

on-preview ：点击文件中已上传的文件执行的方法

on-remove：删除某文件执行的方法

on-change：文件状态改变时，上传成功和失败都会执行

on-success：文件上传成功执行的方法

on-error：文件上传失败时执行的方法

data：需要另外给接口传的别的值

file-list：上传的文件列表

beforeAvatarUpload：文件在上传之前执行的方法（我用来判断文件大小和文件类型）

所有方法⬇

javascript 复制代码

handleChange(file, fileList){
		this.uploadDisabled = fileList.length >= 1;
	},
	submitUpload() {
		this.$refs.upload.submit()
	},
	handleError(err, file, fileList) {
		this.$message({
			message: '上传失败！',
			type: 'success'
		});
		console.log(err);
	},
	handleSuccess(response, file, fileList) {
		this.fileList[0] = response.result
		this.uploadedFile = this.registered_form.idCardImg = response.result.url
	},
	handleRemove(file, fileList) {
		this.fileList = [];
		this.uploadedFile = '',
		setTimeout(()=>{
			this.uploadDisabled = false;
		},1000)
	},
	handlePreview(file) {
		this.dialogImageUrl = file.url;
		this.uploadDisabled = true;
	},
	//判断是否大于5m
	beforeAvatarUpload(file) {
		const isLt2M = file.size / 1024 / 1024 < 5;
		const isJPG = file.type === "image/jpeg" || file.type === "image/png"
		if (!isLt2M) {
			this.$message.warning("上传图片大小不能超过 2M!")
			return false
		} else if (!isJPG) {
			this.$message.warning("上传图片格式只能是jpg或png")
			return false
		}
		return isLt2M;
	},

用到的data

javascript 复制代码

uploadedFile: '',
fileList:[],
uploadDisabled:false,
dialogImageUrl: '',
upheaders: {
    Authorization: localStorage.getItem('token')
},

css

css 复制代码

.el-upload--picture-card{
	width:100px;
	height:100px;
	line-height:20px;
	padding-top: 25px;
	.teacher_el_upload_btn{
		font-size: 10px ;
	}
}

.hide .el-upload,.hide .el-upload--picture-card{
  display: none;
  // background:red;
}
.upload .registered{
	text-align: left;
}
.el-upload-list--picture-card .el-upload-list__item{
	width:100px;
	height:100px;
}