怎么控制最多传三张图片

Question

这里图片上传要控制最多三张，要怎么修改？

import React, { useRef, useState } from 'react'
import { Button, Modal, Tooltip, Image } from 'antd'
import { upload2 } from '@/api/base-data'
import { imageUrl } from '@/api/ask'

export default ({ title = '上传', suffix = '', list = [], setList, size = 'middle', disabled = false }) => {
    const inputEl = useRef(null)
    function onChange() {
        if (!inputEl.current.value) {
            return;
        }
        const files = inputEl.current.files;
        const formDatas = []
        for (let i = 0; i < files.length; i++) {
            const formData = new FormData();
            formData.append('file', files[i])
            formDatas.push(upload2(formData))
        }
        Promise.all(formDatas).then(res => {
            console.log("upload2 res is ", res)
            if (Array.isArray(res)) {
                const newList = res.map(item => item.data[0].sortePath)
                setList(newList)
            }
        })
    }

    function handleClick() {
        inputEl.current.click();
    }

    function handlePreview() {
        setVisible(true);
        console.log('list', list)
    }

    const [visible, setVisible] = useState(false)


    function onCancel() {
        setVisible(false)
    }

    return (
        <div>
            <Tooltip title='如需上传多张，请多选。再次点击会覆盖上传内容'>
                <Button size={size} type='primary' onClick={handleClick} disabled={disabled} style={{ marginRight: 4 }}>{title}</Button>
            </Tooltip>
            {list.length > 0 && (
                <span>已成功上传{list.length}张，最上传多3张。</span>
            )}
            <span style={{ display: 'inline-block', marginLeft: 4 }}>{suffix}</span>
            <input style={{ display: 'none' }} ref={inputEl} type="file" multiple onChange={onChange} />
        </div>
    )
}

Answer 1

情况一：当多于3个的时候停止上传
直接判断files.length是否大于3，大于3就return或不进行上传操作。
情况二：后面的覆盖前面的
当files.length大于3的时候，使用数组的slice函数截取最后3个或前面3个，如files.slice(files.length - 3)，然后上传截取出来的文件