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

news2024/10/6 8:30:23

需求:上传的文件格式必须是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
            }
        },

        // 上传
        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
        },

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/740729.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

X2000 Linux 调试VL53L4CD

由于VL53L4CD具有更高的精度&#xff0c;更低的功耗&#xff0c;所以尝试将VL53L4CD移植到X2000上进行测试。 一、下载驱动 en.VL53L4CD_LinuxDriver 二、SDK中加入驱动 1、加入源码 在\module_driver\devices下创建VL53L4CD文件夹&#xff0c;再将\en.VL53L4CD_LinuxDriver…

网络爬虫-jd滑块验证码

仅供研究学习使用。 目标站点 --> 京东网页登录 当我们输入账号密码后&#xff0c;点击登录&#xff0c;首先映入眼帘的是一个滑块&#xff0c;那我们先分析一下滑块吧。 上图是滑块的有关信息&#xff0c;左边的横线是请求的url&#xff0c;右边是参数&#xff0c;很显然&…

敏捷测试自动化

目录 前言&#xff1a; 敏捷宣言 敏捷软件开发VS传统方法 敏捷云服务 对什么进行自动化&#xff1f; 测试自动化的技巧 关于敏捷测试和自动化测试的关键信息 前言&#xff1a; 敏捷测试自动化是在敏捷开发环境中使用自动化工具和技术来支持测试活动的一种方法。它旨在提…

SQL使用(一):如何使用SQL语句去查询第二高的值

今天刷MYSQL题的时候刷到这样一个题&#xff1a; 编写一个 SQL 查询&#xff0c;获取 Employee 表中第二高的薪水&#xff08;Salary&#xff09; 。------------| Id | Salary |------------| 1 | 100 || 2 | 200 || 3 | 300 |------------例如上述 Employee 表&a…

时间序列预测 | Matlab自回归差分移动平均模型ARIMA时间序列预测,可实现多步预测,对未来的数据实现预测

文章目录 效果一览文章概述部分源码参考资料效果一览 文章概述 时间序列预测 | Matlab自回归差分移动平均模型ARIMA时间序列预测,可实现多步预测,对未来的数据实现预测 评价指标包括:MAE、RMSE和R2等,代码质量极高,方便学习和替换数据。要求2018版本及以上。 部分源码 %% …

C语言比较容易出错的printf语句/cout语句

请问以下代码的输出结果是什么&#xff1f; int main() {int n 2;//cout << n << n << n--;printf("%d %d %d", n, n, n--);system("pause");return 0; } 结果&#xff1a; 很奇怪&#xff1f; 为什么会这样&#xff1f; 原来自己之…

MOVEit再现新漏洞,多个版本受影响

今年6月&#xff0c;文件共享工具MOVEit Transfer曾曝出SQL 注入漏洞&#xff0c;能让远程攻击者访问其数据库并执行任意代码。最近&#xff0c;MOVEit Transfer 母公司Progress Software又披露了三个新漏洞。 这三个漏洞分别是 CVE-2023-36932、CVE-2023-36933 和 CVE-2023-36…

【ACL 2023】具有高效推理速度的中文领域文图生成扩散模型和工具链

近日&#xff0c;阿里云机器学习平台PAI与华南理工大学合作&#xff08;阿里云与华南理工大学联合培养项目&#xff09;在自然语言处理顶级会议ACL2023上发表了具有高效推理速度的中文领域文图生成扩散模型和工具链Rapid Diffusion。它是面向中文特定领域的文图生成模型&#x…

了解MQL4,轻松自定义外汇交易收益曲线

外汇交易是现代社会中增长最快的交易形式之一&#xff0c;而MQL4编程语言是一种针对外汇交易的编程语言。熟练使用MQL4编程语言可以帮助交易者轻松自定义外汇交易收益曲线。本文将介绍什么是MQL4&#xff0c;以及如何使用MQL4来自定义外汇交易收益曲线。 一、什么是MQL4 MQL4…

MyBatis 中的 SQL 映射文件如何配置参数映射,如何使用

MyBatis 中的 SQL 映射文件如何配置参数映射&#xff0c;如何使用 MyBatis 是一种开源的 Java 持久化框架&#xff0c;它可以自动将数据库中的数据映射到 Java 对象中&#xff0c;并且使得 Java 对象可以非常方便地存储到数据库中。在 MyBatis 中&#xff0c;SQL 映射文件是一…

Tomcat之安装与项目部署

Tomcat是一个免费、开源的javaWeb轻量级应用服务器 优于是使用Java开发的&#xff0c;需要运行在java虚拟机中&#xff0c;所以必须安装jdk&#xff0c;以提供运行环境。 Tomcat可以看做一个http服务器&#xff0c;通过组件Connector接收http请求并解析&#xff0c;然后把结果…

Xmake v2.8.1 发布,大量细节特性改进

Xmake 是一个基于 Lua 的轻量级跨平台构建工具。 它非常的轻量&#xff0c;没有任何依赖&#xff0c;因为它内置了 Lua 运行时。 它使用 xmake.lua 维护项目构建&#xff0c;相比 makefile/CMakeLists.txt&#xff0c;配置语法更加简洁直观&#xff0c;对新手非常友好&#x…

hbuilderX 的使用

1 创建nui-app 点击左上角的文件点击新建-》项目&#xff0c;将信息填写完整点击确定 2 uni-modules 插件管理 通过 uni-app 插件市场 实现 uni-modules的插件安装&#xff0c;在插件市场搜索对应的插件名称&#xff0c;点击进去&#xff0c;点使用Hbuild’erX导入插件。详细…

Java 动态规划 64. 最小路径和

代码展示&#xff1a; dp[i][j]Math.min(dp[i-1][j],dp[i][j-1])grid[i-1][j-1]; 该题可以通过动态规划解决&#xff0c;动态规划的题根据以下的5大步骤便可轻松解决 1.状态表示 题目要求我们计算从起点到最后一个位置的最小路径和&#xff0c;我们可以创建一个dp表&#xff0c…

算法笔记: 相似性度量

1 欧氏距离 1.1 标准化欧氏距离 先将数据标准化 &#xff08;减去的均值两两抵消&#xff09; 2 曼哈顿距离 又称为城市街区距离 3 切比雪夫距离 等价形式 4 闵可夫斯基距离 minkowski 当p1时&#xff0c;就是曼哈顿距离 当p2时&#xff0c;就是欧氏距离 当p→∞时&#xf…

WSL安装与使用(Ubuntu22.04)

文章目录 概要WSL介绍WSL安装安装环境安装方式一&#xff1a;命令行安装(不推荐&#xff0c;可能出现奇怪的问题)安装方式二&#xff1a;通过控制面板安装 WSL 安装Ubuntu22.04&#xff08;通过Microsoft Store&#xff09;Ubuntu更换镜像源进入Ubuntu更换镜像源 Ubuntu安装Doc…

Spark-用IDEA编写wordcount demo

配置 Spark版本&#xff1a;3.2.0 Scala版本&#xff1a;2.12.12 JDK&#xff1a;1.8 Maven&#xff1a;3.6.3 pom文件 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi&quo…

小红书笔记为什么没有流量,归纳总结

我们都知道小红书是一个内容分享类平台。小红书笔记是平台的主要内容形式。但有时候&#xff0c;我们撰写了一篇笔记&#xff0c;却无法搜索到&#xff0c;今天为大家分享下小红书笔记为什么没有流量&#xff0c;归纳总结&#xff01; 一、小红书笔记不被收录的原因 当我们精心…

Java 递归和非递归方式实现二叉树的前、中、后序遍历

文章目录 Node结点定义前序遍历递归方式实现非递归方式实现图文解读 最终结果 中序遍历递归方式实现非递归方式实现图文解读 最终结果 后序遍历递归方式实现非递归方式实现图文解读 最终结果 结语 Node结点定义 private static class Node {public int value;public Node left;…

Vue子组件向父组件传递消息

父子组件之间的通信&#xff1a;props与emit 通常提到props&#xff0c;都会想到的是父组件给子组件传值&#xff1b;提到emit为子组件向父组件发送消息&#xff0c;但其实&#xff0c;props也可以使子组件向父组件传递消息 方式为在父组件中通过为子组件绑定属性&#xff0c…