react与antd搭配实现图片上传与设置主图功能

antd的upload可以实现上传，但是其上传之后，图片列表展示都是其组件里面已经封装好的，也没有vue那种提供插槽solt的功能，但是我司需要实现在每张图片下方有个radio标签来设置主图，左思右想，是不是得直接把upload组件拿过来再自己封装一层呢？实力不允许也没办法。

 so 我的解决办法是，封装一个组件，里面有upload组件，上传成功的话，将fileList filter出来，用图片展示，图片和radio可以封装的把，这并不难，直接放下代码把：

import React, { Component } from 'react';
import { Upload, message, Icon, Modal, Radio, Card } from 'antd';
import config from '../../../../config';
import { getCookie } from 'Utils/publicFunc';
import './UploadPhoto.scss';

class UploadPhoto extends Component {
    constructor(props) {
        super(props);
        this.state = {
            showModal: false,
            previewImage: '',
            fileList: [],
            value:''
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleCancel = this.handleCancel.bind(this);
        this.beforeUpload = this.beforeUpload.bind(this);
        this.onChangeRadioSelect=this.onChangeRadioSelect.bind(this);
    }
    handleChange(info) {
        let { file, fileList } = info;
        if (file.status == 'error') {
            Modal.error({
                centered: true,
                title: '上传失败',
                content: file.response.message
            });
            return;
        }
        fileList = fileList.map((file) => {
            if (file.response) {
                file.url = file.response.downloadPath;
            }
            return file;
        });
        fileList = fileList.filter((file) => {
            return file.status === 'done';
        });
        this.setState({
            fileList: [...fileList]
        }, () => {
            if (file.status == 'done') {
                message.success('上传成功');
                const { businessType } = this.props;
                file.response.businessType = businessType;
                file.response.code = null;
                file.response.extraCode='N';
                if (this.props.addAttachment) {
                    window.console.log('调用');
                    this.props.addAttachment(file.response);
                }
            }
        });
    }
    handleRemove(file) {
        if (this.props.removeAttachment) {
            this.props.removeAttachment(file.response);
        }
    }
    handleCancel() {
        this.setState({
            showModal: false
        });
    }
    handlePreview(url) {
        this.setState({
            previewImage: url,
            showModal: true
        });
    }

    beforeUpload(file) {
      const {fileSize = 200 * 1024} = this.props;
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      if (!isJPG && !isPNG) {
        file.status = 'error';
        message.error('只能上传格式jpg或png的图片');
        return false;
      }
      if (file.size > fileSize) {
        file.status = 'error';
        message.error(`图片大小不能大于${parseInt(fileSize/1024)}kb`);
        return false;
      }
    }

    onChangeRadioSelect(e){
        this.setState({value:e.target.value},() => {
            if(this.props.callToMainImg){
                e.target.info.response.extraCode='Y';
                this.props.callToMainImg(e.target.info.response);
            }
        });
    }

    render() {
        const { showModal, previewImage } = this.state;
        let { fileType, defaultFileList,preview} = this.props;
        window.console.log(defaultFileList);
        let extraFlag=null;
        if(defaultFileList&&defaultFileList.length>0){
           extraFlag= defaultFileList.find((item) => item.extraCode=='Y');
           extraFlag=extraFlag ? extraFlag.uid : null;
        }
        const uploadProps = {
            action: `${config.server}/attachment/uploadCompressPicture/${fileType}?width=500&height=500`,
            onChange: this.handleChange,
            onPreview: this.handlePreview,
            onRemove: this.handleRemove,
            beforeUpload: this.beforeUpload,
            listType: 'picture-card',
            headers: {
                'Authorization': `bearer ${getCookie('token')}`
            },
            defaultFileList:null
        };
        const uploadButton = (
            

                
                
{'上传图片'}
            
        );
        return (
            

               0?'inline-block':'none'}}>{'设为主图'}
                
                    {
                        defaultFileList.map((item) => {
                            return (
                              

                                    
                                        
                                        
                                    
                                  
                      
                            );
                        })
                    }
               
                    
                        {preview ? '' : uploadButton}
                    
                
                    
                
            
        );
    }
}

export default UploadPhoto;

css： 

.uploadPhoto {
    .ant-radio {
        position: absolute;
        bottom: -5px;
        left: 40px;
    }
    .ant-upload.ant-upload-select-picture-card {
        display: inline-table;
        height: 90px;
        width: 90px;
    }
    .ant-upload-list-picture-card {
        display: none;
    }
    .ant-radio-group {
        overflow-x: auto;
        max-width: 590px;
        overflow-y: hidden;
        white-space: nowrap;
    }
    .ant-radio-wrapper{
        text-align: center;
    }
    .ant-card {
        position: relative;
        .del-picture {
            position: absolute;
            cursor: pointer;
            right: 2px;
            top: 2px;
        }
    }
}

具体如何使用：

上面的使用，在defaultFileList时进行的函数的转化，其实时将参数转成antd需要的函数结构。

效果：

单纯展示：