elementui el-upload在on-change中校验文件类型错误时隐藏文件列表

最新推荐文章于 2025-05-09 17:31:31 发布

if时光重来

最新推荐文章于 2025-05-09 17:31:31 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： elementui vue.js 前端

原文链接：https://blog.youkuaiyun.com/m0_60908822/article/details/122079494

vue 专栏收录该内容

34 篇文章

订阅专栏

该文章介绍了一个Vue.js组件`el-upload`的使用，它限制用户只能上传PDF文件。当文件类型不符时，组件会清除文件列表并显示错误消息。`on-change`、`on-exceed`和`on-success`等事件处理函数被用于控制上传流程。

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

在这里插入图片描述

<el-upload
                        
                        ref="uploadref"
                        :limit="1"
                        :action="url"
                        :on-change="handleChang"
                        :on-exceed="handleExceed"
                        :auto-upload="false"
                        :on-success="ywzgdw_data"
                        >
                        <el-button slot="trigger" size="small" type="danger">上传</el-button>
                      </el-upload>

handleChang(file, fileList, index){
	// 检测文件类型不符合时终止显示文件列表
	if(file.type != 'application/pdf'){
		this.$message.error('只能上传 pdf 文件')
		console.log(this.$refs.uploadref)
		this.$refs.uploadref.uploadFiles=[];
		return false;
	}
	
}