飞冰（ICE）Upload组件实现阿里云视频上传功能

最近在使用阿里开源的飞冰（ICE）框架来开发一个中后台应用，项目中涉及到了一个前端通过js直接往阿里云oss中上传视频的功能

通过仔细研究Upload自定义上传方法request方法完成了阿里云视频上传功能（在antd中也同样适用，只不过request）

这里直接上代码

FileUploadAliOss.jsx

import React, { Component } from 'react';
import { Upload, Button, Message } from '@alifd/next';
import PropTypes from 'prop-types';
import customRequest from './customRequest'; // 阿里云oss上传处理流程（下边代码介绍）

export default class FileUploadAliOss extends Component {
  static displayName = 'FileUploadAliOss';
  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = { fileArr: [], // 上传成功的文件信息数据，可以用来传给后台 };
  }

  // 上传成功
  uploadOnSuccess = (file, value) => {
    this.props.fechData(value);
  };

  // 上传失败
  onError = () => {
    Message.error('上传失败，请联系管理员');
  };

  // 移除已上传的文件信息 
  uploadOnRemove = (file) => {
    const { fileArr } = this.state;
    fileArr.forEach((item, index) => {
      if (item.url === file.url){
        fileArr.splice(index,1);
      }
    });
    this.setState({ fileArr });
  };

  beforeUpload = (info) => {};

  onChange = (info) => {};

  render() {
    return (
      <Upload
        name="vedio"
        value={this.state.fileArr}
        listType="text"
        formatter={(res, file) => {
          // 函数里面根据当前服务器返回的响应数据
          // 重新拼装符合组件要求的数据格式
          if(!res.err){
            return {
              success: parseInt(res.err, 10) === 0,
              url: res.data.uri,
              imgURL: res.data.img,
              downloadURL: res.data.uri,
              fileName: res.data.FileName
            }
          }else{
            return {
              success: parseInt(res.err, 10) === 0
            }
          }
        }}
        beforeUpload={this.beforeUpload}
        onSuccess={this.uploadOnSuccess}
        onRemove={this.uploadOnRemove}
        onError={this.onError}
        request={customRequest}
      >
        <Button type="primary">选择视频</Button>
      </Upload>
    );
  }
}

customRequest.js

import Ajax from '../../api/service'; // 这个是我自己封装的一个ajax方法（过）
export default function customRequest (option) {
  /* coding here */
  console.log(option); // option中为文件信息和Upload组件的各种回调方法
  let uploadAuth,uploadAddress,videoId;
  const uploader = new AliyunUpload.Vod({
    // 文件上传失败
    'onUploadFailed': function (uploadInfo, code, message) {
      option.onError(message, uploadInfo); // 执行上传失败的回调
    },
    // 文件上传完成
    'onUploadSucceed': function (uploadInfo) {
      // console.log(uploadInfo);
      option.onSuccess({ err: 0, data: { uri: uploadInfo.videoId, ...uploadInfo } }); // 执行上传成功的回调
    },
    // 文件上传进度
    'onUploadProgress': function (uploadInfo, totalSize, loadedPercent) {
      option.onProgress({ percent: parseFloat((loadedPercent * 100.00).toFixed(2)) }); // 实时返回上传进度数据
    },
    // STS临时账号会过期，过期时触发函数
    'onUploadTokenExpired': function (uploadInfo) {
      console.log("onUploadTokenExpired");
      Ajax({ url: 'a', data: { id } }).then(function (res) {  // 过期在这里重新获取账号
        uploadAuth = res.data.UploadAuth;
        uploadAddress = res.data.UploadAddress;
        videoId = res.data.VideoId;
        uploader.resumeUploadWithAuth(uploadAuth);
      });
    },
    onUploadCanceled:function(uploadInfo)
    {
      // console.log("onUploadCanceled:file:" + uploadInfo.file.name);
    },
    // 开始上传
    'onUploadstarted': function (uploadInfo) {
    // 这里在后台获取上传凭证信息和上传地址
      Ajax({ url: 'b', data: { title:uploadInfo.file.name, file_name:uploadInfo.file.name} }).then(function (res) {
        uploadAuth = res.data.UploadAuth;
        uploadAddress = res.data.UploadAddress;
        videoId = res.data.VideoId;
        if(!uploadInfo.videoId)//这个文件没有上传异常
        {
          uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress,videoId);
        }
        else//如果videoId有值，根据videoId刷新上传凭证
        {
          uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress);
        }
      });
    }
    ,
    'onUploadEnd':function(uploadInfo){
      // console.log("onUploadEnd: uploaded all the files");
    }
  });
  // 点播上传。每次上传都是独立的鉴权，所以初始化时，不需要设置鉴权
  // 临时账号过期时，在onUploadTokenExpired事件中，用resumeWithToken更新临时账号，上传会续传。
  uploader.addFile(option.file, null, null, null); // 添加文件
  uploader.startUpload(); // 开始上传
  return {abort() {/* coding here */}};
}

这样就实现了阿里云点播视频上传的功能了

最后一点是必须要在首页index.html页面中引入一下阿里upload jdk js文件

<script src="public/plugins/aliyun-upload-sdk/lib/es6-promise.min.js"></script>
<script src="public/plugins/aliyun-upload-sdk/lib/aliyun-oss-sdk-5.2.0.min.js"></script>
<script src="public/plugins/aliyun-upload-sdk/aliyun-upload-sdk-1.4.0.min.js"></script>