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

这篇具有很好参考价值的文章主要介绍了antd upload上传格式.doc、.docx、.pdf、.png、.jpg、.rar和大小100兆限制。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

限制上传文件格式.rar、.zip、.pdf、.jpg、.png、.docx
antd 中upload对于限制上传文件格式的属性是accept,在开发的过程中,accept对于.doc、.docx、.pdf、.png、.jpg、.rar,格式的限制是完全没有问题的。但是测试和我说,当选择文件的自定义格式改为所有文件时,之前限制好的除了.doc、.docx、.pdf、.png、.jpg、.rar之外的文件格式的仍然可以进行选择,后端没有校验仍然可以上传成功。
antd upload上传格式.doc、.docx、.pdf、.png、.jpg、.rar和大小100兆限制
antd upload上传格式.doc、.docx、.pdf、.png、.jpg、.rar和大小100兆限制
所以就必须想办法解决了,刚好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" />

子组件处理文章来源地址https://www.toymoban.com/news/detail-413410.html

// 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;
    }
  }

到了这里,关于antd upload上传格式.doc、.docx、.pdf、.png、.jpg、.rar和大小100兆限制的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp 在线预览各种格式文件(支持doc, xls, ppt, pdf, docx, xlsx, pptx格式) 适用于小程序 (解决了真机调试可以打开,发布体验版打不开的问题)(可设置文件名)

    代码: 参考官方文档: uni.saveFile(OBJECT) @savefile | uni-app官网 uni-app,uniCloud,serverless https://uniapp.dcloud.net.cn/api/file/file.html#opendocument tips: 问题一: 打不开         1. 文件地址须保证能正常打开(在浏览器中尝试是否能预览或正常下载)         2.注意文件名最好为数字字母(非中文) 问题

    2024年02月05日
    浏览(65)
  • vue3 el-upload 上传附件及预览 限制只能上传一个图片或者pdf格式的文件

    效果如图 直接看代码吧 template部分 css部分 js部分

    2024年02月11日
    浏览(87)
  • Python实现: JPG与PNG格式图片间互转

    【注意】转换完成后,转换图会与原图在同一个文件夹,只需按大小进行排列就可以将转换后的图片筛选出来

    2024年02月06日
    浏览(66)
  • python读取pdf、doc、docx、ppt、pptx文件内容

    使用python读取文件,其中pdf、docx、pptx可以直接读,.ppt和.doc文件不能直接读,需要转换成.pptx和.docx文件,并且需要区分系统 如果是linux系统,请先安装组件 python代码如下:

    2024年02月11日
    浏览(51)
  • 如何修复损坏的DOC和DOCX格式Word文件?

    我们日常办公中,经常用到Word文档。但是有时会遇到word文件损坏、无法打开的情况。这时该怎么办?接着往下看, 小编在这里就给大家带来最简单的Word文件修复方法 ! 很多时候DOC和DOCX Word文件会无缘无故的损坏无法打开,一般来说导致word文件损坏的常见原因如下: 恶意

    2024年02月13日
    浏览(45)
  • 怎么在电脑上把jpg改成png?批量图片格式转换器分享推荐

    美工在处理图片时,经常使用png格式图片,所以就会有用到格式转换器(https://www.yasuotu.com/geshi),尤其是在需要处理批量图片的时候,今天介绍的这款批量图片格式转换器,可以在线操作,打开浏览器就能完成png格式转换,非常方便,一起来看一下吧。 使用浏览器搜索【压

    2023年04月24日
    浏览(56)
  • Python 实现 PDF 到 Word 文档的高效转换(DOC、DOCX)

    PDF(Portable Document Format)已成为一种广泛使用的电子文档格式。PDF的主要优势是跨平台,可以在不同设备上呈现一致的外观。然而,当我们需要对文件内容进行编辑或修改,直接编辑PDF文件会非常困难,而且效果也不理想。将PDF文件转换为Word文档(doc、docx)再进行编辑是一

    2024年02月03日
    浏览(52)
  • PDF处理控件Aspose.PDF功能演示:使用Java将Base64字符串转换为PDF/JPG/PNG图像

    Aspose.PDF  是一款高级PDF处理API,可以在跨平台应用程序中轻松生成,修改,转换,呈现,保护和打印文档。无需使用Adobe Acrobat。此外,API提供压缩选项,表创建和处理,图形和图像功能,广泛的超链接功能,图章和水印任务,扩展的安全控件和自定义字体处理。 Aspose API支持

    2024年02月04日
    浏览(85)
  • 2022/7 用python批量将.mat文件转为.jpg/.png/.bmp格式图片

    网上看了一个下午都没找到能用的。。。抄来抄去都没说到点子上 mat文件是Matlab的数据存储的标准格式。 涉及到文件转换肯定要看数据的结构, 事实上别人的代码很难成功就是因为大家的mat文件的数据结构各不相同 照着这个一步一步来你肯定可以学会 1、第一段代码,包括

    2023年04月09日
    浏览(62)
  • .docx,.doc,.pptx,.ppt,.xlsx,.pdf后缀文档图标不显示

    .docx,.doc,.pptx,.ppt,.xlsx五种操作类似。 1、Win+R,输入regedit,回车; 2、对于 Word 2007/Word 2010,备份并删除以下三个键值:(可以右击选择“导出”,把键值备份至桌面。一旦发生问题,可以通过备份来恢复注册表键值) HKEY_CLASSES_ROOT/.docx HKEY_CLASSES_ROOT/Word.Document.12 HKEY_CU

    2024年02月07日
    浏览(62)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包