antd upload文件格式大小尺寸校验

最新推荐文章于 2024-06-21 17:13:28 发布

chestnut99

最新推荐文章于 2024-06-21 17:13:28 发布

阅读量1.1k

点赞数

分类专栏： react antd 文章标签：前端 javascript typescript

本文链接：https://blog.csdn.net/weixin_45954775/article/details/127787227

版权

在前端开发中，Antd 的 Upload 组件提供了一个 `beforeUpload` 钩子，用于在文件上传前进行格式、大小和尺寸的校验。通过这个钩子，可以返回 false 或 Promise.reject 来阻止不符合条件的文件上传。在 IE9 以上浏览器，返回 false 可以拦截上传，而要避免文件显示在列表中，需返回 Upload.LIST_IGNORE。

摘要由CSDN通过智能技术生成

通过beforeUpload 校验

上传文件之前的钩子，参数为上传的文件，若返回 false 则停止上传。支持返回一个 Promise 对象，Promise 对象 reject 时则停止上传，resolve 时开始上传（ resolve 传入 File 或 Blob 对象则上传 resolve 传入对象）；也可以返回 Upload.LIST_IGNORE，此时列表中将不展示此文件。注意：IE9 不支持该方法
beforeUpload 返回 false 或 Promise.reject 时，只用于拦截上传行为，不会阻止文件进入上传列表（原因）。如果需要阻止列表展现，可以通过返回 Upload.LIST_IGNORE 实现。

import {
    Button, message, Upload } from 'antd'
const Index= () => {
   
  // 检测尺寸
  const isSize = (file: File, width: number, height: number) => {
   
    return new Promise<void>((resolve, reject) => {
   
      const _URL = window.URL || window.webkitURL
      const img = new Image