VideoUploadCom.jsx

import React from 'react'
import {extend} from 'umi-request';
import queryConfig from "./queryConfig";

import {Upload, message} from 'antd';
import {isJSON} from "@/webPublic/one_stop_public/copy";

const getToken = () => {
  const x = localStorage.getItem('uploadVideoServiceToken');
  if(x === "null" || x === "undefined"){
    return null;
  }
  return x;
};

const configService = queryConfig('uploadVideoService');

const token = getToken();

const umiRequest = extend({
  // errorHandler, // 默认错误处理
  credentials: 'omit', // 默认请求是否带上cookie
  mode: 'cors',
});

export default class VideoUploadCom extends React.Component {
  constructor(props) {
    super(props);
    const {value} = props;
    let url = value;
    if (isJSON(value)) {
      url = JSON.parse(value).url;
    }
    this.state = {
      url: url || '',
    }
  }

  triggerChange = (changedValue) => {
    // Should provide an event to pass value to Form.
    const onChange = this.props.onChange;
    if (onChange) {
      onChange(changedValue);
    }
  };

  componentWillReceiveProps(nextProps) {
    // Should be a controlled component.
    if ('value' in nextProps) {
      const {value} = nextProps;
      if (isJSON(value)) {
        this.setState({
          url: JSON.parse(value).url,
        });
      }
    }
  }

  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(`视频上传失败`);
    }
  };

  render() {
    const {json, disabled} = this.props;
    const {url} = this.state;
    console.log(url);
    return (
      <Upload.Dragger disabled={disabled}
                      accept={'.mp4,.webm,.ogg'}
                      url={url}
                      showUploadList={false}
                      name="file"
                      action={configService + '/uploadFileApi/upload'}
                      onChange={this.changeUrl}
                      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}}>

          </div>}

      </Upload.Dragger>
    );

  }
}