element-plus：Upload单文件上传

lynachen

已于 2023-01-04 11:53:07 修改

阅读量2.4k

点赞数

分类专栏： element-plus vue3 文章标签： vue.js elementui javascript

于 2023-01-03 17:19:56 首次发布

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.youkuaiyun.com/Julylyna/article/details/128536193

版权

element-plus 同时被 2 个专栏收录

3 篇文章

订阅专栏

3 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图如下：

上传前：

上传后：

			<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多图上传预览