element-plus中el-upload组件限制上传文件类型

最新推荐文章于 2024-05-17 14:58:40 发布
最新推荐文章于 2024-05-17 14:58:40 发布
阅读量5k 收藏 9
点赞数 13
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59642018/article/details/135267222
版权

 Element Plus 中，el-upload 组件可以通过设置 accept 属性来限制上传文件的格式

1.限制上传图片文件

<el-upload
  accept="image/*"
  action="/upload"
  :on-success="handleSuccess"
>
  <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
</el-upload>

2.限制上传 Excel 文件

<el-upload
  accept=".xls,.xlsx"
  action="/upload"
  :on-success="handleSuccess"
>
  <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
</el-upload>
幼稚鬼_Blog
关注
  • 13
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
文件的读写基本操作
范高伦的博客
09-07 1万+
一、文件是计算机中数据持久化存储的表现形式 读写文件标准操作格式1： 1、打开文件：file1 = open('文件名','读写模式') 2、操作文件 3、关闭文件：file1.close() 文件操作完毕后必须关闭，否则长期保持对文件的连接状态，造成内存溢出的现象发生 读写文件操作格式2： # 1、打开文件 file1 = open('demo.txt','w') # 2、操作文件 file1.write('hello world') # 3、关闭文件 file1.close() 1、打开文件：wi
element UI upload组件上传附件格式限制方法
10-18
今天小编就为大家分享一篇element UI upload组件上传附件格式限制方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
el-upload上传限制文件类型
李白爱睡觉的博客
04-16 7419
在使用element的上传时，遇到限制文件类型的需求，但是在上传不符合要求的文件时，会弹出确认删除的确认框和不符合类型的message的提示，解决方法如下： html： <el-upload ref="upload" :file-list="form.fileList" action="http://..." :data="params" :on-preview="handlePreview"
【element-plus 上传组件】el-upload图片上传
最新发布
weixin_58319963的博客
05-17 278
springboot+element-plus上传图片到本地
Element-UI中Upload上传文件前端缓存处理示例
10-17
主要介绍了Element-UI中Upload上传文件前端缓存处理示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
element-ui 文件上传修改文件名的方法示例
01-19
技术背景 Vue + axios + element-ui 问题的产生 一个美好的周五，我正在愉快地打着代码，突然收到一封来自产品的神秘消息，线上活动出 BUG 了！呐尼！怎么可能！一定是你的打开方式不对！打开消息截图，线上的一个聊天室背景突然变成了另一张毫无关联的图（一个大大的太阳），我一看，这不是我刚刚上传的一个图嘛！为什么跑到那里去了！ 问题定位 我们所有的静态资源（比如图片）都会上传到一个服务器上，在活动中访问时会统一访问静态资源服务器，而静态资源上传时并没有处理重名问题！！！接口侧仅仅是在前面加了一个4位数的随机数，也就是说，当同名图片超过 10000 张时，百分百会有图片被覆
element ui手动限制上传类型
m0_50663823的博客
08-08 1914
element ui手动限制上传类型
对于el-upload标签的accept属性理解
热门推荐
Koreyoshi123654的博客
01-20 1万+
el-upload 上传文件的文件类型校验问题
文件上传限制以及element 和 element accept上传使用
SqlloveSyn的博客
03-08 2714
大家好，今天和大家分享一下上传文件如何实现上传限制，在制作项目时会遇见需要上传文件的功能，比如上传图片，上传音频，上传视频等等。但是点击上传文件打开文件夹时，文件夹内有好多格式的图片或音频，这个时候为了方便就可以进行文件格式的限制，只显示要上传的文件类型，下面我们来看看如何实现这个功能。
第十六篇 难点突破之 Vue 中使用 ElementUi el-upload 进行手动上传文件 限制上传文件类型 大小 同名等进行限制
Yzt_199626的博客
06-06 5616
个人在做文件上传功能的时候，踩过不少的坑，特在此记录下，方便后续的查阅，也帮助有需要的朋友查阅。 实现的功能有：文件类型上传类型限制、文件大小限制、文件总大小限制、文件
el-upload上传限制
m0_46114541的博客
06-29 3481
对elment-UI的上传组件进行一次简易封装，对上传的文件进行限制。
vue-cli3.0+element-ui上传组件el-upload的使用
11-28
比如文件大小限制，文件个数限制，文件类型限制，文件上传后的列表样式自定义，包括上传进度条等问题。下面是我对element-ui的上传组件的一些改造， 点击查看源码。 我是自己维护了一个列表数据，再对这个列表数据...
使用element-ui的upload组件实现上传图片和pdf可查看方法
08-20
使用element-ui的upload组件实现上传图片和pdf可查看方法
基于element-ui 使用 upload 预览图片 （含删除功能）
08-23
基于element-ui 使用 upload 预览图片 （含删除功能）参考链接：https://blog.csdn.net/qq_36437172/article/details/100034867
用element的upload组件实现多图片上传和压缩的示例代码
10-17
主要介绍了用element的upload组件实现多图片上传和压缩的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vite-ts-vue3-element-plus
03-12
由于TypeScript无法处理.vue导入的类型信息，因此默认情况下将它们.vue为通用Vue组件类型。 在大多数情况下，如果您真的不在乎模板之外的组件prop类型，那么这很好。 但是，如果您希望在.vue导入中获取实际的道具...
vue el-upload上传组件限制文件类型：accept属性
sayyy的专栏
01-21 6515
el-upload 控件文档 https://element.eleme.cn/#/zh-CN/component/upload accept属性 示例 <el-upload class="avatar-uploader" action="https://xxx/upload" accept=".jpg,.jpeg,.png,.gif" :show-file-list="false" :on-success="handleAvatarSuccess" :before-uplo
Vue el-upload accept 区分文件后缀名大小写 上传文件类型及文件大小限制
林中明月间丶
01-24 864
方法中设置，需要显示几个根据需求来设置。如果限制只能上传1个文件，可以把。限制文件类型，通过上传之前的钩子。限制文件大小，就是里面注释的部分。设置为1就行，也可以在。
element el-upload 上传文件组件封装
weixin_45753961的博客
09-04 2036
组件index.vue <template> <div class="applyUpload"> <div class="apply_content"> <div class="upload_content"> <div class="upload_item"> <div class="fileName"><i style="color:red">*</i&
element-plus el-upload 控制上传文件类型
04-04
要控制上传文件类型，可以使用el-upload的file-list属性，它是一个数组，用于存储已上传的文件列表。通过监听before-upload事件，可以在上传之前对文件进行检查和筛选。 示例代码： ```html <template> <el-upload class="upload-demo" action="/upload" :file-list="fileList" :before-upload="beforeUpload" :on-success="onSuccess" :on-error="onError" :auto-upload="false"> <el-button slot="trigger" size="small" type="primary">选取文件</el-button> <el-button style="margin-left: 10px;" size="small" type="success" @click="uploadFiles">上传到服务器</el-button> </el-upload> </template> <script> export default { data() { return { fileList: [] }; }, methods: { beforeUpload(file) { // 判断文件类型是否符合要求 const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'; const isLt2M = file.size / 1024 / 1024 < 2; if (!isJpgOrPng) { this.$message.error('上传头像图片只能是 JPG/PNG 格式!'); return false; } if (!isLt2M) { this.$message.error('上传头像图片大小不能超过 2MB!'); return false; } // 添加到fileList中 this.fileList.push(file); return false; }, onSuccess() { this.$message.success('上传成功'); }, onError() { this.$message.error('上传失败'); }, uploadFiles() { // 执行上传操作 this.$refs.upload.submit(); } } }; </script> ``` 在before-upload事件中，我们检查了文件类型和大小，如果符合要求，则将文件添加到fileList中。在上传之前，我们可以通过遍历fileList来控制上传的文件类型。 另外，我们将auto-upload属性设置为false，这样选择文件后不会自动上传，而是需要手动调用submit方法上传文件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值