react 文件上传限制格式类型大小

最新推荐文章于 2024-04-23 19:00:31 发布

爱技术的大仙

最新推荐文章于 2024-04-23 19:00:31 发布

阅读量1.4k

点赞数 2

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_55799355/article/details/121329044

版权

该博客展示了如何在React应用中实现文件上传功能，同时限制上传文件的大小不超过5MB，并且只允许导入Excel（.xls, .xlsx）格式的文件。通过使用Ant Design的Upload组件，结合beforeUpload和onChange回调函数进行文件验证和错误提示。

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

react 文件上传限制格式类型大小

import React from 'react'
import { Upload, message, Button, Card } from 'antd';
import { UploadOutlined } from '@ant-design/icons';

export default function Index() {
    const beforeupload = (file, fileList) => {
        const islt5M = file.size / 1024 / 1024 < 5
        if (!islt5M) {
            message.error('文件夹过大！！')
            const index = fileList.indexOf(file)
            fileList.splice(index, 1)
            return false
        }
        const fileType = file.name
            .substr(file.name.lastIndexOf("."))
            .toLowerCase();  // 获取文件后缀名
        if (fileType !== '.excel' && fileType !== '.xls') {
            message.error('请选择正确格式文件夹')
            // 如果错的话就把这个文件夹删掉
            const index = fileList.indexOf(file)
            fileList.splice(index, 1);
            return false
        }        
    }
    const change = (fileInfo) => {
        if (fileInfo.file.response === 'success') {
            message.success('导入成功')
        }
        if (fileInfo.file.response) {
            message.error(
                `导入异常记录:${fileInfo.file.response}请修改`
            )
        }
    }
    return (
        <div>
            <Card>
                <Upload
                    method='post'
                    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                    onChange={change}
                    beforeUpload={beforeupload}
                    directory>
                    <Button icon={<UploadOutlined />}>导入</Button>
                </Upload>
                <span >文件格式不能超过5M，仅允许导入“execl和xls”类型文件</span>
            </Card>
        </div>
    )
}