antdesign(antd)Upload的简单封装

antdesign(antd)Upload的简单封装，参数都在

/**
 * Created by wuyakun on 2017/3/20.
 */

import React from 'react';
import {Upload, Icon, Modal, message} from 'antd';
import './uploadManyView.less';
import API_URL from '../../../common/url';
import common from '../../../common/common';

class PicturesWall extends React.Component {

    state = {
        previewVisible: false,
        previewImage: '',
        length: this.props.length,
        maxFileSize: this.props.maxFileSize ? this.props.maxFileSize : 2,
        fileList: this.props.value instanceof Array ? this.props.value : [],

        action: API_URL.IMAGE_ACTION,
        appid: API_URL.APP_ID,
        secret: API_URL.SECRET,
        imageHead: API_URL.IMAGE_URL_HEAD,
    };

    /**
     * 关闭预览
     */

    handleCancel = () => {
        this.setState({previewVisible: false});
    };

    /**
     * 查看预览
     * @param file
     */

    handlePreview = (file) => {
        this.setState({
            previewImage: file.url || file.thumbUrl,
            previewVisible: true,
        });
    };

    /**
     * 处理图片更新
     * @param e
     */

    handleChange = (e) => {
        let fileList = this.handleUpload(e);
        this.props.onChange(fileList);
    };

    /**
     * 处理更新
     * @param e
     * @returns {*}
     */

    handleUpload = (e) => {
        //再进行实际筛选，其实上面那一行没有用
        let fileList = e.fileList.map(file => {
            if (file.response) {
                //这个地方是上传结束之后会调用的方法，这边是判断success!!!
                if (file.response.success) {
                    return this.filter(file);
                }
            }
            return file;
        });
        this.setState({fileList: fileList});
        return fileList;
    };

    /**
     * 过滤服务器返回的数据
     * @param file
     */

    filter = (file) => {
        const {name, response, uid, status} = file;
        return {name, url: response.data, uid, status};
    };

    /**
     * 上传之前的验证
     */

    beforeUpload = (file) => {
        const maxFileSize = this.state.maxFileSize;
        if (maxFileSize) {
            const isLtMax = file.size / 1024 / 1024 < maxFileSize;
            if (!isLtMax) {
                message.error(`文件大小超过${maxFileSize}M限制`);
            }
            return isLtMax;
        }
    };

    render() {
        const {previewVisible, previewImage, appid, secret} = this.state;
        let fileList = this.state.fileList;
        if (fileList.length > 0) {
            fileList.map((file, i) => {

                if (!common.startsWith(file.url, 'https://')) {
                    file.url = `${this.state.imageHead}${file.url}`;
                }
            });
        }

        //一共有多少个图片
        const uploadButton = fileList.length >= this.props.length ? null : (
            

{fileList.length >= this.state.length ? null : uploadButton}