Ant Design Upload listType=“picture-card“ 实现多图上传以及点击预览图片封装

用户可以上传图片并在列表中显示缩略图，当上传照片数到达限制后，上传按钮消失。点击图片打开图片预览弹框。在使用的地方引入组件，组件在传图后会返回图片数组。

import React, {
    useState, useEffect } from 'react';
import {
    Upload, Modal } from 'antd';
import {
    PlusOutlined } from '@ant-design/icons';

//上传前判断标准
function beforeUpload(file) {
   
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
   
        message.error('只能上传JPG/PNG格式的文件!');
    }
    const isLt2M = file.size / 1024 / 1024 < 5;
    if (!isLt2M) {
   
        message.error('图片大小不能超过5M!');
    }
    return isJpgOrPng && isLt2M;
}

const UploadMorePic = (props) => {
   
    const {
   
        action, //上传地址
        headers, //设置上传的请求头部
        maxLength, //最大上传图片数量
        urlList, //已上传的文件列表
        onFinish = () => {
    //上传完回调
            return false;