VideoUploadCom.jsx 3.2 KB
Newer Older
1 2 3
import React from 'react';
import { extend } from 'umi-request';
import queryConfig from './queryConfig';
4

5 6
import { Upload, message } from 'antd';
import { isJSON } from '@/webPublic/one_stop_public/copy';
7 8 9 10
import {
  getSassApiHeader,
  getSysCode
} from '@/webPublic/one_stop_public/2023yunshangguizhou/utils';
11 12

const getToken = () => {
13 14 15 16 17
	const x = localStorage.getItem('uploadVideoServiceToken');
	if (x === 'null' || x === 'undefined') {
		return null;
	}
	return x;
18 19 20 21 22 23 24
};

const configService = queryConfig('uploadVideoService');

const token = getToken();

const umiRequest = extend({
25
	// errorHandler, // 默认错误处理
26
	credentials: 'include', // 默认请求是否带上cookie
27
	mode: 'cors',
28 29 30
});

export default class VideoUploadCom extends React.Component {
31 32 33 34 35 36 37 38 39 40 41
	constructor(props) {
		super(props);
		const { value } = props;
		let url = value;
		if (isJSON(value)) {
			url = JSON.parse(value).url;
		}
		this.state = {
			url: url || '',
		};
	}
42

43 44 45 46 47 48 49
	triggerChange = (changedValue) => {
		// Should provide an event to pass value to Form.
		const onChange = this.props.onChange;
		if (onChange) {
			onChange(changedValue);
		}
	};
50

51 52 53 54 55 56 57 58 59 60 61
	componentWillReceiveProps(nextProps) {
		// Should be a controlled component.
		if ('value' in nextProps) {
			const { value } = nextProps;
			if (isJSON(value)) {
				this.setState({
					url: JSON.parse(value).url,
				});
			}
		}
	}
62

63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101
	changeUrl = (info, key) => {
		if (info.file.status === 'done') {
			let filePathThis = info?.file?.response?.data?.filePath;
			message.info('正在获取视频缩略图,请稍后');
			if (filePathThis) {
				setTimeout(() => {
					umiRequest(`${configService}/folderConvertApi/videoScreenshot?token=${token}`, {
						method: 'POST', // 暂时支持post 请求
						headers: {
							Accept: 'application/json;charset=UTF-8',
							// 'Content-Type': 'application/json',
						},
						requestType: 'form',
						data: {
							path: filePathThis,
							screenshotTime: '00:00:5',
						},
					}).then((res) => {
						if (res && res.data) {
							let info = res.data;
							const { screenshots, url, createTime, downloadUrl, filePath, fileExt } = info;
							let needInfo = {
								screenshots,
								url,
								createTime,
								downloadUrl,
								filePath,
								fileExt,
							};
							message.success(`视频上传成功`);
							this.triggerChange(JSON.stringify(needInfo));
						}
					});
				}, 3000);
			}
		} else if (info.file.status === 'error') {
			message.error(`视频上传失败`);
		}
	};
102

103 104 105 106 107 108 109 110 111 112 113 114
	render() {
		const { json, disabled } = this.props;
		const { url } = this.state;
		return (
			<Upload.Dragger
				disabled={disabled}
				accept={'.mp4,.webm,.ogg'}
				url={url}
				showUploadList={false}
				name="file"
				action={configService + '/uploadFileApi/upload'}
				onChange={this.changeUrl}
115 116 117
        headers={
          getSassApiHeader()
        }
118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138
				multiple={false}
				data={{
					isConvert: true,
					token,
				}}
				style={{ padding: 0 }}>
				{url ? (
					<video
						src={url}
						controls
						style={{
							height: json.height,
							width: json.width,
						}}
					/>
				) : (
					<div style={{ height: json.height, width: json.width }} />
				)}
			</Upload.Dragger>
		);
	}
139
}