jitao-client/js/component/crop/video.jsx

import { Component } from 'react';
import { Upload, message, Icon, Modal,Spin } from 'antd';

class VideoComponent extends Component {
	constructor(props) {
		super(props);
        this.state = {
            previewVisible: false,
            previewImage: '',
            loading:false,
            fileList: [],
            fileListUrl:''
        };
	}
	handleCancel() {
		this.setState({ previewVisible: false });
	}
	handlePreview(file) {
		this.setState({
			previewImage: file.url ,
			previewVisible: true
		});
	}
	handleChange(info) {
        this.props.loadState(true);
        this.setState({loading:true})
        let fileList = info.fileList;
        this.setState({ fileList });
        if (info.file.status !== 'uploading') {
        }
        if (info.file.status === 'done') {
            message.success(`上传成功`);
            this.props.fileList(fileList);
            this.props.loadState(false);
            this.setState({
                loading:false,
                fileListUrl:fileList[0].response.data,
            })
        } else if (info.file.status === 'error') {
            message.error(`上传失败`);
            this.props.loadState(false);
        }
	}
    beforeUpload(info){
        if(this.props.dataUrl.type.indexOf('video')>-1){
            if(info.type.indexOf('video')<0){
                message.warning('请上传MP4格式视频文件.');
                return false;
            };
            let sizeMb = info.size/(1024*1024),size=100;
            if(sizeMb>size){  //100Mb之内
                message.warning(`视频大小不超过${size}`);
                return false;
            };
        };
        if(this.props.dataUrl.type.indexOf('image')>-1){
            if(info.type.indexOf('image')<0){
                message.warning('请上传图片.');
                return false;
            };
            let sizeMb = info.size/(1024*1024),size=1;
            if(sizeMb>size){  //1Mb之内
                message.warning(`图片大小不超过${size}MB.`);
                return false;
            };
        }
    }
	componentWillReceiveProps(nextProps) {
        this.state.fileList = nextProps.videoUrl;
	}
	render() {
        const { previewVisible, previewImage, fileList } = this.state;
		const uploadButton = (
			<div>
				<Icon type="plus" />
				<div className="ant-upload-text">点击上传</div>
			</div>
        );
        const dataUrl = this.props.dataUrl||{};
        if(this.state.loading){
            return false;
        }
		return (
			<div className="clearfix">
                <Spin spinning={this.state.loading}>
                    <Upload
                        action={globalConfig.context + dataUrl.url}
                        data={{ sign:dataUrl.keyWord }}
                        listType="picture-card"
                        fileList={fileList}
                        beforeUpload={this.beforeUpload.bind(this)}
                        onPreview={this.handlePreview.bind(this)}
                        onChange={this.handleChange.bind(this)}
                    >
                        {fileList.length >= this.props.dataUrl.page ? null : uploadButton}
                    </Upload>
                    {previewImage&&<Modal maskClosable={false} visible={previewVisible} footer={null} onCancel={this.handleCancel.bind(this)}>
                        {this.props.dataUrl.type.indexOf('video')>-1?<video alt="example" style={{ width: '100%' }} src={previewImage||'http://118.190.205.7:8000/'+this.state.fileListUrl} controls></video>
                        :<img alt="example" style={{ width: '100%' }} src={previewImage} />}
                    </Modal>}   
                </Spin>
			</div>
		);
	}
}

export default VideoComponent;