antd upload上传格式.doc、.docx、.pdf、.png、.jpg、.rar和大小100兆限制

news2024/11/21 0:12:32

限制上传文件格式.rar、.zip、.pdf、.jpg、.png、.docx
antd 中upload对于限制上传文件格式的属性是accept,在开发的过程中,accept对于.doc、.docx、.pdf、.png、.jpg、.rar,格式的限制是完全没有问题的。但是测试和我说,当选择文件的自定义格式改为所有文件时,之前限制好的除了.doc、.docx、.pdf、.png、.jpg、.rar之外的文件格式的仍然可以进行选择,后端没有校验仍然可以上传成功。
在这里插入图片描述
在这里插入图片描述
所以就必须想办法解决了,刚好beforeUpload是upload上传文件之前的钩子,参数为上传的文件,若返回 false 则停止上传。我们在beforeUpload函数的file参数中可以获取上传文件的文件信息,这个时候我们就可以根据file里面的参数来进行判断。
注意:为什么要用file.name的后缀来匹配他的文件类型。因为file的type属性,表示文件类型,在docx后缀的文件type类型为:


type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"

为了支持上传docx文件,所以,只能用下面的方法来实现,因为对upload进行了封装,所以进行了一个转化,这样传入accept= ".rar,.zip,.pdf,.jpg,.png,.docx",方便处理
父组件处理

<Uploader 
 onChange={handleChange}
 onRemove={handleRemove}  
 accept= ".rar,.zip,.pdf,.jpg,.png,.docx" />

子组件处理

// ts写法
const handleBeforeUpload = (file_: any, options_: any) => {
    const file = file_;
    const options = options_;
    // 获取文件后缀如docs,rar,zip等
    const fileType = file?.name.split(".");
    const fileDate = fileType.slice(-1);
    // 将从父组件拿到的accept类型转为数组,类似['.docs','.rar','.zip']
    const docsArr = accept?.split(",");
    if (!docsArr?.includes(`.${fileDate[0]}`)) {
      message.error(`仅支持文件格式:${accept}格式附件!`);
      return false;
    }
    if (file.size / 1024 / 1024 > 100) {
      message.error("文件大小不能超过100兆");
      return false;
    }
  }

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

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

相关文章

前端开发之vue-grid-layout的使用和实例

前端开发之vue-grid-layout的使用和实例前言效果图一、vue中简单案例1、安装组件NPMYarn2、vue文件二、vue3使用&#xff08;vue文件&#xff09;1、需要导入vue3支持的该版本插件2、在mian.js里引入&#xff1a;三、在IE上无法打开&#xff0c;并报错缺少&#xff1a;&#xf…

【TypeScript基础】TypeScript之常用类型(下)

前言 博主主页&#x1f449;&#x1f3fb;蜡笔雏田学代码 专栏链接&#x1f449;&#x1f3fb;【TypeScript专栏】 上篇文章讲解了TypeScript的一些常用类型&#xff0c;&#x1f449;&#x1f3fb;详细内容请阅读【TypeScript基础】TypeScript之常用类型&#xff08;上&#x…

解决TypeError: Cannot read properties of undefined (reading ‘NormalModule‘)的三种方案

目录 前言 第一种 第二种 第三种 前言 大家好呀&#xff01;我是爷爷的茶七里香&#xff0c;今天遇到了一件&#x1f95a;疼的事&#xff0c;一个vuevant写的APP&#xff0c;更换了电脑之后运行不起来&#xff0c;就很奇怪很离谱&#xff0c;报错信息如下&#xff1a; ER…

使用Iframe打印预览pdf,兼容谷歌火狐浏览器

功能场景&#xff1a; 点击页面的打印按钮&#xff0c;可以调用浏览器的打印功能&#xff0c;并预览打印pdf文件。解决火狐浏览器出现about:blank问题。 功能实现&#xff1a; 实现思路&#xff1a; 使用接口获取pdf文件的二进制流&#xff0c;响应类型为blob将拿到的二进制…

vite 本地运行首次进入页面加载慢问题

思考 vite的适用场景是什么&#xff1f; 由于我使用了tailwindcss插件 使用webpack 每次启动所有的项目的css样式都预先使用tailwindcss 转换成css 性能普通的电脑启动项目需要1分钟到2分钟。不过首次加载不会有什么多大的延迟&#xff0c;按需导入的页面加载也不会有多大的延…

博客项目- SSM 实现

文章目录1. 创建项目2. 数据库设计3. 前置任务3.1 拦截器3.2 统一数据格式3.3 创建一个 Constant3.4 统一异常处理3.5 密码加密4. 功能实现4.1 登录功能4.2 注册功能4.3 博客列表页 &#xff08;功能实现&#xff09;4.3.1 左侧框4.3.2 右侧框 (分页功能 页面显示)4.4 博客详情…

【CSS】盒子模型外边距 ③ ( 插入图片 | 插入图片位置移动 - 修改外边距 | 背景图片 | 背景图片移动位置 - 修改背景位置 background-position )

文章目录一、插入图片1、简介2、代码示例二、背景图片1、简介2、代码示例一、插入图片 1、简介 插入图片 : 插入图片方式 : 在 HTML 中 , 使用 <img> 标签可以插入一张图片 ;插入图片适用场景 : 显示 内容 , 按钮 , 一般都使用 插入图片 的方式 展示图片 ,设置插入图片大…

IDEA从零到精通(26)之MybatisX插件的安装与使用

文章目录作者简介引言导航概述安装插件插件的使用小结导航热门专栏推荐作者简介 作者名&#xff1a;编程界明世隐 简介&#xff1a;CSDN博客专家&#xff0c;从事软件开发多年&#xff0c;精通Java、JavaScript&#xff0c;博主也是从零开始一步步把学习成长、深知学习和积累的…

前端发起请求,后端响应请求的整个过程

文章目录前端注册页面axios 请求方法URL 路径配置自定义 axios方法封装后端创建服务器模块接口方法模块连接数据库本文分为&#xff1a;前端、后端两部分讲诉。以下是前端发送请求到服务器&#xff0c;服务器响应前端&#xff0c;的整个过程的图解&#xff1a;前端 前端主要是…

在vue项目当中绑定键盘事件

在vue项目当中&#xff0c;有时会遇到为文本输入框或者button按钮绑定键盘事件&#xff0c;最常见的就是enter回车事件。 按照vue官网给出的方法是&#xff1a; v-on:keyup.enter 简写&#xff1a;keyup.enter &#xff08;注意&#xff1a;如果是绑定在组件上的话&#xff…

让她/他心动的告白,页面制作(9个页面+链接+代码,原生HTML+CSS+JS实现)

文章目录一、pikachu告白信件1.效果图2.代码1.envelope.html2.envelope.css3.pikachu.html4.pikachu.css二、告白小宇宙1.效果图2.代码1.index.html2.index.css三、流光爱心1.效果图2.代码1.index.html2.index.css3.index.js四、520贺卡&#xff08;1&#xff09;1.效果图2.代码…

Node.js16.15.1的一个报错及解决方案

Node.js16.15.1的一个报错及解决方案前言准备工作核心解决方案测试前言 最近在进行Node.js的下载安装和环境的配置&#xff0c;在官网上下载了LTS版本16.15.1&#xff0c;没想到在后续的使用中出现一种报错。 例如&#xff0c;在命令提示符窗口中输入npm -v 想要查看npm的版本…

微信小程序下拉刷新

一、如何设置微信小程序所有页面都可以下拉刷新呢&#xff1f; 1、在app.json的"window"中进行配置 &#xff08;1&#xff09;把"backgroundTextStyle":“light"改为"backgroundTextStyle”:“dark” &#xff08;2&#xff09;添加"enab…

【青山css】css3阴影效果属性详解及创意玩法

前言 css阴影效果是我们经常使用的一个css属性&#xff0c;但你有仔细了解过它吗&#xff1f;是不是用的时候直接从蓝湖上复制过来就行了&#xff0c;那你了解它的每个参数吗&#xff1f;用阴影又能实现哪些好看的效果呢&#xff1f;来看一看我收集总结的css阴影知识吧&#x…

js执行顺序

1.首先js是单线程的 所有的同步任务都是按顺序依次执行的&#xff0c;前面的执行完了之后才会执行后面的任务。遇到计算量大的代码就会阻塞在这里。下面的代码就是打印输出10000次&#xff0c;当循环走完了之后 才会走后面的代码&#xff0c;输出的时间是981ms 输出981ms 2.因…

Plugin [id: ‘com.android.application‘, version: ‘7.*.*‘, apply: false] was not found 的解决办法

呜呜~ 在新建项目File->New->New Project->Empty Activity 后遇到以下情况&#xff1a;Plugin [id: com.android.application, version: 7.2.2, apply: false] was not found in any of the following sources: 问题1&#xff1a;配置了 proxy 把File | Settings | A…

vue3中使用vue-i18n(ts中使用$t, vue3不用this)

vue项目里多语言工具一直用的vue-i18n。 以前用的 vue2&#xff0c;也没啥大问题&#xff0c;就是配置好之后用t(“你的属性名”)就行&#xff0c;现在用vue3其实本来也没太大变化。 但是配置完之后&#xff0c;在html中用$t()没有问题&#xff0c;显示文案什么的一切正常。而在…

关于前端提示err_ssl_protocol_error错误的一次记录

当前端提示错误的时候按照 1.同步系统的时间&#xff0c;日期和区域 Chrome上出现“ err_SSL_protocol_error”的最常见原因之一是错误的时间和日期配置。错误的时区选择也会导致此错误。如果您在设备上遇到此错误&#xff0c;请快速修改时间&#xff0c;数据和区域设置。如果该…

2023高频前端面试题(持续更新 含答案)

1&#xff0c;es6有哪些新特性&#xff1f;ES6是2015年推出的一个新的版本、这个版本相对于ES5的语法做了很多的优化let和const具有块级作用域&#xff0c;不存在变量提升的问题。新增了箭头函数&#xff0c;简化了定义函数的写法&#xff0c;同时可以巧用箭头函数的this、&…

用代码写出浪漫__合集(python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心)

活动地址&#xff1a;CSDN21天学习挑战赛 用代码写出浪漫合集&#xff08;爱心、玫瑰花&#xff09; 本文目录&#xff1a; ​一、前言 二、用python、matplotlib、Matlab、java绘制爱心 &#xff08;1&#xff09;爱心图形1&#xff08;弧线型&#xff09;&#xff08;显示…