element上传文件对格式限制的处理方案

 更新时间:2024年02月06日 11:52:18   作者:巨蟹座守护骑士  
最近做项目遇到这样的需求,需要上传的文件格式必须是pdf格式,方便我们查看,本文给大家分享element上传文件对格式限制的处理方案,感兴趣的朋友一起看看吧

需求:上传的文件格式必须是pdf格式,方便查看

规定多种格式用逗号隔开

使用这个属性可以规定上传文件格式,但是有bug 

 可以手动改变显示的文件类型,还是可以传其他文件类型

 所以需要在上传的时候限制上传的文件格式

 

 上传组件

<el-upload 
 :file-list="contract_file"
 :http-request="UploadImage"
 :before-upload="before_upload"
 :on-remove="handleRemove" 
 :on-preview="handlePictureCardPreview"
 accept=".pdf">
 <el-button type="primary">上传</el-button>
</el-upload>
         // 上传前
        before_upload(file) {
            // 截取上传文件的后缀名
            let fileType = file.name.substring(file.name.lastIndexOf(".") + 1);
            console.log(fileType);
            // 判断文件名的类型,允许多种就判断多个
            if (fileType == 'pdf') {
                console.log(file);
            } else {
                ElMessage.error("文件类型必须为pdf格式")
                // 返回false 就不会执行上传操作了
                return false
            }
            // 判断多个
            // if (!["pdf", "doc", "docx"].includes(fileType)) {
            //    ElMessage.error("文件类型必须为pdf格式");
            //    return false;
            // }
        },
        // 上传
        async UploadImage(param: any) {
            let formData = new FormData()
            formData.append('file', param.file)
            // 调用自己的后端接口上传文件到服务器
            const res: any = await getUpload(formData)
            if (res.code === 1) {
                ElMessage.success(res.msg)
                this.contract_file.push({
                    name: res.data.name,
                    url: res.data.url
                })
            } else {
                ElMessage.error(res.msg)
            }
        },
        // 点击上传的文件可预览文件
        handlePictureCardPreview(file: any) {
            let { contract_file } = this
            contract_file.map(item => {
                if (item.name === file.name) {
                    window.open(item.url)
                }
            })
        },
        // 删除上传的文件
        handleRemove(flie: any, fileList: any) {
            this.contract_file = fileList
        },

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

相关文章

  • vue+elementUi图片上传组件使用详解

    vue+elementUi图片上传组件使用详解

    这篇文章主要为大家详细介绍了vue+elementUi图片上传组件的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-08-08
  • Vue封装一个Tabbar组件 带组件路由跳转方式

    Vue封装一个Tabbar组件 带组件路由跳转方式

    这篇文章主要介绍了Vue封装一个Tabbar组件 带组件路由跳转方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue.js第一天学习笔记(数据的双向绑定、常用指令)

    Vue.js第一天学习笔记(数据的双向绑定、常用指令)

    这篇文章主要为大家分享了Vue.js第一天的学习笔记,包括数据的双向绑定、常用指令学习,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • vue.config.js文件devServer字段的常用选项详解

    vue.config.js文件devServer字段的常用选项详解

    在 Vue CLI 生成的 vue.config.js 文件中,devServer 字段用于配置开发服务器的选项,本文给大家介绍vue.config.js文件devServer字段的常用选项,感兴趣的朋友一起看看吧
    2023-11-11
  • vue给对象添加属性没有响应式的问题及解决

    vue给对象添加属性没有响应式的问题及解决

    这篇文章主要介绍了vue给对象添加属性没有响应式的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • 使用Vue3实现交互式雷达图的代码实现

    使用Vue3实现交互式雷达图的代码实现

    雷达图是一种可视化数据的方式,用于比较多个类别中不同指标的相对值,它适用于需要展示多个指标之间的关系和差异的场景,本文给大家介绍了如何用Vue3轻松创建交互式雷达图,需要的朋友可以参考下
    2024-06-06
  • 一文带你了解vue双向数据绑定

    一文带你了解vue双向数据绑定

    v-model 是 Vue.js 中一个重要的指令,它提供了一种简洁的方式来实现双向数据绑定,下面小编就来带大家深入了解下vue双向数据绑定的原理与应用吧
    2023-09-09
  • Vue+GeoScene监测浏览器内存变化并优化性能

    Vue+GeoScene监测浏览器内存变化并优化性能

    在做 Vue 项目集成 GeoScene 地图的时候,很多人都会遇到一个头疼问题,页面切几次,地图重建几次,浏览器就卡,内存就飙,下面我们就来看看具体的解决方案吧
    2025-11-11
  • 前端数据存储常用工具Vuex、Pinia、Redux详解

    前端数据存储常用工具Vuex、Pinia、Redux详解

    Redux、Vuex 和 Pinia 都是用于状态管理的流行框架,这篇文章主要介绍了前端数据存储常用工具Vuex、Pinia、Redux的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-04-04
  • VUE引入DataV报错解决实战记录

    VUE引入DataV报错解决实战记录

    在使用vue开发大屏时,发现了一个很好用的可视化组件库DataV,下面这篇文章主要给大家介绍了关于VUE引入DataV报错解决的实战记录,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-04-04

最新评论