| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108 | 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;
 |