element-ui upload组件上传文件类型限制问题小结

 更新时间:2024年02月06日 11:46:51   作者:为什么名字都被占用  
最近我遇到这样的问题,接受类型已经加了accept 但是当选择弹出本地选择文件时候切换到所有文件 之前的文件类型就本根过滤不掉了,下面小编给大家介绍element-ui upload组件上传文件类型限制问题小结,感兴趣的朋友一起看看吧

1.先说一下我遇到的问题 其中接受类型已经加了accept 但是当选择弹出本地选择文件时候切换到所有文件 之前的文件类型就本根过滤不掉了

<el-upload
                class="c-upload"
                ref="upload"
                :action="actions"
                :headers="myHeaders"
                :data="myData"
                :limit='limit'
                accept=".xls,.xlsx"
                :on-exceed="onExceed"
                :on-change="onChange"
                :on-success="onSuccess"
                :on-error="onError"
                :file-list="fileList"
                :before-upload="beforeUpload"
                :auto-upload="false"
            >
                <el-button
                    slot="trigger"
                    size="small"
                    type="primary"
                >选取文件</el-button>
                <div
                    slot="tip"
                    class="el-upload__tip"
                >只能上传xls/xlsx文件,且不超过一个</div>
            </el-upload>

解决办法:

上传之前:before-upload="beforeUpload"再次判断文件类型

beforeUpload(file) {
            console.log(file)
            var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)
            const extension = testmsg === 'xls'
            const extension2 = testmsg === 'xlsx'
            // const isLt2M = file.size / 1024 / 1024 < 10
            if(!extension && !extension2) {
                this.$message({
                    message: '上传文件只能是 xls、xlsx格式!',
                    type: 'warning'
                });
            }
            // if(!isLt2M) {
            //     this.$message({
            //         message: '上传文件大小不能超过 10MB!',
            //         type: 'warning'
            //     });
            // }
            // return (extension || extension2) && isLt2M
            return extension || extension2
        },

其中也可加文件大小限制  我没用到就注释掉了(isLt2M)

到此这篇关于element-ui upload组件上传文件类型限制的文章就介绍到这了,更多相关element-ui upload上传文件类型限制内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue3实现批量异步更新

    Vue3实现批量异步更新

    这篇文章主要为大家详细介绍了Vue3批量异步更新是如何实现的,文中的示例代码简洁易懂,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-08-08
  • vue2封装webSocket的实现(开箱即用)

    vue2封装webSocket的实现(开箱即用)

    在Vue2中,可以使用WebSocket实时通信,本文主要介绍了vue2封装webSocket的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-08-08
  • vue Nprogress进度条功能实现常见问题

    vue Nprogress进度条功能实现常见问题

    这篇文章主要介绍了vue Nprogress进度条功能实现,NProgress是页面跳转是出现在浏览器顶部的进度条,本文通过实例代码给大家讲解,需要的朋友可以参考下
    2021-07-07
  • 解决vue app.js/vender.js过大优化启动页

    解决vue app.js/vender.js过大优化启动页

    这篇文章主要为大家介绍了解决vue app.js/vender.js过大优化启动页过程详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-10-10
  • 使用vue实现点击按钮滑出面板的实现代码

    使用vue实现点击按钮滑出面板的实现代码

    这篇文章主要介绍了使用vue实现点击按钮滑出面板的实现代码,非常不错,具有参考借鉴价值,需要的朋友参考下
    2017-01-01
  • Vue+Echart柱状图实现疫情数据统计

    Vue+Echart柱状图实现疫情数据统计

    这篇文章主要介绍了在Vue nuxt项目中,如何使用Echart(百度图表)柱状图来实现疫情数据统计,感兴趣的小伙伴可以跟随小编一起学习一下
    2021-12-12
  • vuex Module将 store 分割成模块的操作

    vuex Module将 store 分割成模块的操作

    这篇文章主要介绍了vuex Module将 store 分割成模块,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-12-12
  • vue实现跳转接口push 转场动画示例

    vue实现跳转接口push 转场动画示例

    今天小编就为大家分享一篇vue实现跳转接口push 转场动画示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • Vue中进行路由懒加载的示例详解

    Vue中进行路由懒加载的示例详解

    路由懒加载是一种优化Vue应用程序性能的技术,本文介绍了Vue中如何进行路由懒加载,包括使用Vue异步组件和Webpack代码分割,需要的朋友可以参考下
    2023-06-06
  • 详解如何在Vue中快速实现数据可视化大屏展示

    详解如何在Vue中快速实现数据可视化大屏展示

    在现代数据驱动的应用程序中,数据可视化大屏已经成为了非常重要的一环,通过对海量数据进行可视化展示,可以帮助用户更好地理解和分析数据,从而做出更加明智的决策,在Vue中进行数据可视化大屏展示也变得越来越流行,本文将介绍如何在Vue中快速实现数据可视化大屏展示
    2023-10-10

最新评论