oss对象存储

oss视频上传

import React from 'react';
import { CForm } from 'cantd';
import { Icon, Form, Button, Upload, message, InputNumber, Progress } from 'antd';
import { connect } from 'dva';
import styles from './UploadVideo.less';
import {
  colLayout,
  labelLayout,
  uploadCourseColumnFirst,
  uploadCourseColumnLast,
  tailFuncLayout,
  labelLayout1,
} from './CourseVideoTypeMap';
import { OSSUploadFile } from './OSS';

const modelKey = 'uploadVideo';
const FormItem = Form.Item;

class UploadVideoUpload extends React.Component {
  constructor(props) {
    super(props);
    this.CForm = React.createRef(); // documentTab, 添加声明
    this.state = {
      fileList: [],
      formData: {
        classHour: 1,
        courseChapters: 1,
      },
      resVideoMsg: '',
      uploadProgress: 0,
    };
  }

  componentDidMount() {
    const {
      uploadVideo,
      dispatch,
      location: { query },
    } = this.props;
    dispatch({
      type: `${modelKey}/getCourseMsg`,
      payload: {
        curriculumId: query.curriculumId,
      },
    });
  }

  returnVideoList = () => {
    const { uploadVideo, dispatch } = this.props;
    const { seriesId } = uploadVideo;
    dispatch({
      type: `${modelKey}/goToCourseTypeCreate`,
      payload: {
        url: `/service/collegeAdmin/seriesManager/list/detail?primary=${seriesId}`,
      },
    });
  };

  onSubmit = value => {
    const { uploadVideo, dispatch } = this.props;
    // 3，调用的方法
    this.CForm.props.form.validateFields((error, value) => {
      if (!!error) {
        return false;
      } else {
        const { formData, resVideoMsg } = this.state;
        let values = {};
        if (resVideoMsg === '') {
          values = {
            videoDuration: value.videoDuration,
            curriculumId: this.props.location.query.curriculumId,
            isTry: value.isTry,
          };
        } else {
          values = {
            resourceUrl: resVideoMsg.requestUrls[0].substr(
              0,
              resVideoMsg.requestUrls[0].lastIndexOf('?')
            ),
            videoDuration: value.videoDuration,
            curriculumId: this.props.location.query.curriculumId,
            isTry: value.isTry,
          };
        }

        dispatch({
          type: `${modelKey}/uploadCourseVideo`,
          payload: values,
        });
      }
    });
  };

  beforeUpload = file => {
    if (file.type !== 'video/mp4') {
      message.info('目前仅支持MP4格式的视频文件！');
      return;
    }
    if (file.size > 500 * 1024 * 1024) {
      message.info('视频大小不能超过500M！');
      return;
    }
    this.setState({
      fileList: [file],
    });

    OSSUploadFile(file, progress => {
      this.setState({
        uploadProgress: progress,
      });
    })
      .then(res => {
        if (res.res.status === 200) {
          message.success('文件上传成功');
          this.setState({
            resVideoMsg: res.res,
          });
        }
      })
      .catch(res => {
        message.error('出错啦！');
      });
  };

  handleSaveNumber = value => {
    this.setState({
      ...this.state,
      formData: {
        ...this.state.formData,
        courseChapters: value,
      },
    });
  };

  handleSaveNumberClassHour = value => {
    this.setState({
      ...this.state,
      formData: {
        ...this.state.formData,
        classHour: value,
      },
    });
  };

  render() {
    const { uploadVideo, loading, location } = this.props;
    const { courseDetail } = uploadVideo;
    // 课程系列数据源
    const { getFieldDecorator } = this.props.form;
    const videoData = {
      videoDuration: courseDetail.videoDuration,
      isTry: courseDetail.isTry,
    };
    return (
      <div className={styles.UploadVideoCreate}>
        <div className={styles.title}>
          <Icon type="arrow-left" onClick={this.returnVideoList} className={styles.iconStyle} />
          <label className={styles.labelStyle}>上传视频课程</label>
        </div>
        <div className={styles.cardMsg}>
          <label>
            <span>所选课程系列：</span>
            <strong>{courseDetail.seriesName}</strong>
          </label>
          <span className={styles.blank}>|</span>
          <label>
            <span>课程章节：</span>
            <strong>
              <span>{`第${courseDetail.courseChapters}章`}</span>
              <span style={{ marginLeft: 15 }}>{courseDetail.courseChaptersName}</span>
            </strong>
          </label>
          <span className={styles.blank}>|</span>
          <label>
            <span>课程小节：</span>
            <strong>
              <span>{`第${courseDetail.classHour}节`}</span>
              <span style={{ marginLeft: 15 }}>{courseDetail.curriculumTitle}</span>
            </strong>
          </label>
        </div>
        {/*2, 添加引用*/}
        <CForm
          wrappedComponentRef={inst => {
            this.CForm = inst;
          }}
          colLayout={colLayout}
          labelLayout={labelLayout}
          tailFuncLayout={tailFuncLayout}
          onSubmit={this.onSubmit}
          columns={uploadCourseColumnFirst}
          afterColumns={uploadCourseColumnLast}
          data={videoData}
          onSubmitEnable={courseDetail.resourceUrl ? true : this.state.resVideoMsg ? true : false}
        >
          <FormItem label="上传视频" {...labelLayout}>
            {getFieldDecorator('uploadVideo', {
              rules: [{ required: courseDetail.resourceUrl ? false : true, message: '请上传视频' }],
            })(
              <Upload beforeUpload={this.beforeUpload} fileList={this.state.fileList}>
                <Button>
                  <Icon type="upload" /> 上传视频
                </Button>
              </Upload>
            )}
          </FormItem>
          {this.state.fileList.length > 0 ? (
            <FormItem label="" {...labelLayout1}>
              {getFieldDecorator('progress', {
                rules: [
                  {
                    required: false,
                    message: '所选课程系列',
                  },
                ],
              })(<Progress percent={this.state.uploadProgress} status="active" />)}
            </FormItem>
          ) : null}
        </CForm>
      </div>
    );
  }
}

export default connect(state => {
  return {
    uploadVideo: state[modelKey],
    loading: state.loading.models[modelKey],
  };
})(Form.create()(UploadVideoUpload));

// OSS 上传工具设置：
import OSS from 'ali-oss';

let client = new OSS({
  region: 'oss-cn-beijing',
  accessKeyId: 'LTAIdDJwBG7U83Kq', // LTAIdDJwBG7U83Kq LTAISKQc5q4L2vYC
  accessKeySecret: 'MCgcKdYzN3uk93EVPPR0esnGCHT4UP', // 'MCgcKdYzN3uk93EVPPR0esnGCHT4UP',9XPgV6PqxP24YBn9yQSlDarGR1Hx2q
  bucket: 'jouav-job', // jouav-job liuting
});

function genFileUid() {
  return Number(
    Math.random()
      .toString()
      .substr(3, 20) + Date.now()
  ).toString(36);
}

// 获得上传状态，
export async function OSSUploadFile(file, progressCB) {
  try {
    const findLastPointPosition = file.name.lastIndexOf('.');
    const getNameLength = file.name.length;
    const suffix = file.name.substring(findLastPointPosition + 1, getNameLength);
    return await client.multipartUpload(genFileUid() + '.' + suffix, file, {
      progress: async function(p) {
        progressCB(Math.round(p * 100));
      },
    });
  } catch (e) {
    if (e.code === 'ConnectionTimeoutError') {
      console.log('Woops,超时啦!');
    }
    return e;
  }
}

登录