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


	 
点击上传照片

action:请求地址

headers:请求头

limit:上传图片最大数量

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

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

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

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

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

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

file-list:上传的文件列表

beforeAvatarUpload:文件在上传之前执行的方法(我用来判断文件大小和文件类型)

所有方法⬇

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

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

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

你可能感兴趣的:(elementui,vue.js,前端)