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

<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:文件在上传之前执行的方法(我用来判断文件大小和文件类型)

所有方法⬇

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值