React使用upload上传图片，格式为卡片模式

注释：

listType="picture-card" ,文件上传的类型；name='file' ; 后台需要的键名；

data={{dataId: treeDataId}}额外想给后台传递的参数

import React, {Component} from 'react';
import {Upload, Modal} from 'antd';
import {PlusOutlined} from '@ant-design/icons';
import commonConfig from "../../../static/js/commonConfig";

function getBase64(file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => resolve(reader.result);
        reader.onerror = error => reject(error);
    });
}

export default class PicturesWall extends React.Component {
    state = {
        previewVisible: false, //预览
        previewImage: '',
        previewTitle: '',
        fileList: [],
        file: [],
        dataId: ''
    };
    handleCancel = () => this.setState({previewVisible: false});

    handlePreview = async file => {
        if (!file.url && !file.preview) {
            //将图片转换层base64编码
            file.preview = await getBase64(file.originFileObj);
        }

        this.setState({
            previewImage: file.url || file.preview,
            previewVisible: true,
            previewTitle: file.name || file.url.substring(file.url.lastIndexOf('/') + 1),
        });
    };

    //文件上传，监控是否操作文件
    //点击添加一个新的文件，删除一个文件
    handleChange = ({file, fileList}) => {
        this.setState({fileName: file.name, fileList, file})
    };
    beforeUpload = () => {
        return false
    }

    render() {
        const {treeDataId} = this.props
        const {previewVisible, previewImage, fileList, previewTitle} = this.state;
        const uploadButton = (
            <div>
                <PlusOutlined/>
                <div style={{marginTop: 8}}>Upload</div>
            </div>
        );
        return (
            <>
                <Upload
                    name='file' //后台需要接收的参数名
                    action={null}
                    // action={commonConfig.url + 'datasubjectclassify/addmulti/_dataPicture'}
                    listType="picture-card" //显示的样式
                    fileList={fileList}
                    onPreview={this.handlePreview}
                    onChange={this.handleChange}
                    beforeUpload={this.beforeUpload}
                    data={{dataId: treeDataId}}
                >
                    {fileList.length >= 1 ? null : uploadButton}
                </Upload>
                <Modal
                    visible={previewVisible}
                    title={previewTitle}
                    footer={null}
                    onCancel={this.handleCancel}
                >
                    <img alt="example" style={{width: '100%'}} src={previewImage}/>
                </Modal>
            </>
        );
    }
}

uploadFileHandle = () => {
        const {treeNodeName, treeDataId} = this.state;
        let fileList = this.uploadElement.state.file;
        console.log(fileList)
        const formData = new FormData();
        for (let i = 0; i < [fileList].length; i++) {
            formData.append('file', [fileList][i])
            formData.append('dataId', treeDataId)
        }
        commonConfig.ajaxUploadHttp(commonConfig.url + 'datasubjectclassify/addmulti/_dataPicture', formData, res => {
            console.log(res);
            if (res.result) {
                message.success(res.msg)
            } else {
                message.info(res.msg)
            }
        }, null, 'POST')
    }

{isModalVisible ? <div className='upload_tile'>
    <Form onFinish={this.uploadFileHandle} ref='uploadFileRef'>
        <Form.Item label="名称" name="treeName">
            <Input/>
        </Form.Item>
   <Form.Item label="图像" name="file">

       //上传文件的组件，使用ref获取到文件组件的值
        <PicturesWall ref={element => this.uploadElement = element}
                      treeDataId={treeDataId}/>
        </Form.Item>
   <Form.Item>
       <Button type="primary" htmlType="submit"> 确定 </Button>
       <Button onClick={this.handleCancel}> 取消 </Button>
   </Form.Item>
  </Form>
</div> : ''}