video.jsx 3.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. import { Component } from 'react';
  2. import { Upload, message, Icon, Modal,Button } from 'antd';
  3. class VideoComponent extends Component {
  4. constructor(props) {
  5. super(props);
  6. this.state = {
  7. previewVisible: false,
  8. previewImage: '',
  9. fileList: [],
  10. urls: []
  11. };
  12. }
  13. handleCancel() {
  14. this.setState({ previewVisible: false });
  15. }
  16. handlePreview(file) {
  17. this.setState({
  18. previewImage: file.url || file.thumbUrl,
  19. previewVisible: true
  20. });
  21. }
  22. handleChange(info) {
  23. let fileList = info.fileList;
  24. this.setState({ fileList });
  25. if (info.file.status !== 'uploading') {
  26. console.log(info.file, info.fileList);
  27. }
  28. if (info.file.status === 'done') {
  29. message.success(`上传成功`);
  30. this.props.fileList(fileList);
  31. this.setState({
  32. urls:fileList[0].response.data});
  33. } else if (info.file.status === 'error') {
  34. message.error(`上传失败`);
  35. }
  36. }
  37. beforeUpload(info){
  38. if(this.props.dataUrl.type.indexOf('video')>-1){
  39. if(info.type.indexOf('video')<0){
  40. message.warning('请上传MP4格式视频文件.');
  41. return false;
  42. };
  43. let sizeMb = info.size/(1024*1024),size=100;
  44. if(sizeMb>size){ //100Mb之内
  45. message.warning(`视频大小不超过${size}`);
  46. return false;
  47. };
  48. };
  49. if(this.props.dataUrl.type.indexOf('image')>-1){
  50. if(info.type.indexOf('image')<0){
  51. message.warning('请上传图片.');
  52. return false;
  53. };
  54. let sizeMb = info.size/(1024*1024),size=1;
  55. if(sizeMb>size){ //100Mb之内
  56. message.warning(`图片大小不超过${size}MB.`);
  57. return false;
  58. };
  59. }
  60. }
  61. componentWillReceiveProps(nextProps) {
  62. this.state.fileList = nextProps.videoUrl;
  63. }
  64. render() {
  65. const { previewVisible, previewImage, fileList } = this.state;
  66. const uploadButton = (
  67. <div>
  68. <Icon type="plus" />
  69. <div className="ant-upload-text">点击上传</div>
  70. </div>
  71. );
  72. const dataUrl = this.props.dataUrl||{};
  73. return (
  74. <div className="clearfix">
  75. <Upload
  76. action={globalConfig.context + dataUrl.url}
  77. data={{ sign:dataUrl.keyWord }}
  78. listType="picture-card"
  79. fileList={fileList}
  80. beforeUpload={this.beforeUpload.bind(this)}
  81. onPreview={this.handlePreview.bind(this)}
  82. onChange={this.handleChange.bind(this)}
  83. >
  84. {fileList.length >= this.props.dataUrl.page ? null : uploadButton}
  85. </Upload>
  86. <Modal maskClosable={false} visible={previewVisible} footer={null} onCancel={this.handleCancel.bind(this)}>
  87. {this.props.dataUrl.type.indexOf('video')>-1?<video alt="example" style={{ width: '100%' }} src={globalConfig.context+this.state.urls} controls></video>
  88. :<img alt="example" style={{ width: '100%' }} src={previewImage} />}
  89. </Modal>
  90. </div>
  91. );
  92. }
  93. }
  94. export default VideoComponent;