图片上传组件我们要实现的功能有图片的上传，删除

1.准备工作

state = {
        files: [],//所有上传图片数据数组
        newFiles: [],//图片数据整合后的数组
    }

2.图片的删除和添加

    uploadImg = (files, event, index) => {
        const { newFiles } = this.state;
        const newImgFiles = JSON.parse(JSON.stringify(newFiles));
        // 用户添加图片
        if (event === 'add') {
            const imgType = files[files.length - 1].file.type;
            const imgSize = files[files.length - 1].file.size;
            const Filename = files[files.length - 1].file.name;
            // 规定用户可以上传的图片类型\
            if (imgType !== "image/jpeg" && imgType !== "image/png" && imgType !== "image/jpg") {
                Toast.info('请上传jpg/png格式的图片', 1.5);
                // 规定图片大小尺寸
            } else if (imgSize > 10 * 1024 * 1024) {
                Toast.info('请上传小于10M的图片', 1.5);
            } else {
                // 筛选需要的图片数据
                const newImgItem = {};
                newImgItem.Filename = Filename;
                newImgItem.type = imgType;
                newImgItem.fileId = Math.random(0);
                if (imgSize < 1024 * 1024) {
                    newImgItem.size = (imgSize / 1024).toFixed(2) + 'KB';
                } else {
                    newImgItem.size = (imgSize / 1024 / 1024).toFixed(2) + 'MB';
                }
                newImgFiles.push(newImgItem);
                this.setState({
                    files,
                    newFiles: newImgFiles
                });
           }
        }
        // 用户删除图片
        if (event === 'remove') {
            newImgFiles.splice(index, 1);
            this.setState({
                files,
                newFiles: newImgFiles
            });
        }
    };

antd的移动端的图片上传组件的删除按钮没有宽高可以打开控制台设置宽高，然后删除按钮就会出来，出来之后就可以点击删除了，此次用的是antd自带的事件，先进行事件判断，是删除还是添加随后进行下一步的操作