element-plus:Upload单文件上传

该代码片段展示了一个使用Element-Plus组件库的el-form和el-upload实现的单文件上传功能,限制了上传文件的类型为doc,docx,pdf,并且文件大小不能超过5M。当超出限制时,会显示错误消息并清除已上传文件。同时,提供了处理文件超出限制、移除文件和文件改变时的回调函数。
摘要由CSDN通过智能技术生成

效果图如下:

上传前:

上传后:

			<el-form ref="formRef" :rules="rules" :model="dataForm" label-position="right" label-width="150px">
				<el-form-item label="合同模板" prop="file">
					<el-upload 
						ref="uploadRef"
						action="#" 
						:limit="1"
    					:on-exceed="handleExceed"
					    :on-remove="handleRemove"
					    :on-change="handleChange"
					    :file-list="dataForm.fileList"
					    :auto-upload="false"
					    :on-success="handleSuccess"
					    :multiple="false"
					    accept=".doc,.docx,.pdf"
					>
						<el-button type="primary">Click to upload</el-button>
				    	<template #tip>
				      		<div class="el-upload__tip">doc/docx/pdf files with a size less than 5M.</div>
				    	</template>
					</el-upload>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleClick('save')" round>提交</el-button>
					<el-button @click="handleClick('reset')" round>重置</el-button>
				</el-form-item>
			</el-form>
			const handleExceed = (files, fileList) => {
				console.log(files)
		        uploadRef.value.clearFiles()  //清空上传文件(限制一个,所以直接清空即可)
				const file = files[0]
				uploadRef.value.handleStart(file)  //重新上传
		    }
			const handleRemove = async(file, fileList) => {
	      		uploadRef.value.clearFiles()  //清空上传文件
		   	}
			//上传成功时弹框
		    const handleSuccess = (res) => {
		
		    }
		    //选择文件
		    const handleChange = (file,fileList) => {
		    	console.log(file)
				const fileImgType = file.name.match(/\.([^\.]+)$/)[1];  //匹配文件格式(最后一个'.'后的格式)或者匹配file.raw.type
		    	const isImageType = ['doc','docx','pdf']; 
				const isLt5M = file.size / 1024 / 1024 < 5;  //判断图片格式与大小
				if (isImageType.indexOf(fileImgType)==-1) {
				    ElMessage.error('文件仅支持doc、docx、pdf格式')  //限制文件类型
				    uploadRef.value.clearFiles()  //清空上传文件
				    return false;
				}
				if (!isLt5M) {
				    ElMessage.error('文件不能超过5M!')  //限制文件大小
				    uploadRef.value.clearFiles()  //清空上传文件
				    return false;
				}	
		   	}

相关文章:element-plus:Upload多图上传预览

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值