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

最新推荐文章于 2025-03-17 19:10:09 发布

转载最新推荐文章于 2025-03-17 19:10:09 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

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

文章标签：

#elementui #vue.js #前端

vue 专栏收录该内容

35 篇文章

订阅专栏

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

在这里插入图片描述

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