前端使用视频点播服务直传阿里云

说到上传，一般都会使用云存储，云存储被广泛应用的无非是阿里云的oss存储和七牛云存储两种。但是在遇到较大的视频和音频的时候，阿里云提供的视频点播服务就很专业，它包括了存储、转码、流量、智能识别等。今天我们就来说一下前端使用视频点播服务直传阿里云。

其实主要搞明白其中几个钩子就万变不离其宗，不管应用到哪儿都可以灵活使用。（有时候可能富文本编辑器里上传）

它的上传流程一共分为以下几个步骤，每个步骤都有相对应的钩子函数：

1.选择文件

2.从后端拿videoId和所需凭证，开始上传

3.文件上传进度（如果需要进度条的话）

4.文件上传成功，从接口获取文件路径

//首先先new一个AliunUpload
createUploader（）{
    let uploader = new AliyunUpload.Vod({
        let self=this
        //这些字段可以去官方api看看，根据自己需求配置，不过都不太重要了，重要的在下面
        timeout: self.timeout || 60000,
        partSize: self.partSize || 1048576,
        parallel: self.parallel || 5,
        retryCount: self.retryCount || 3,
        retryDuration: self.retryDuration || 2,
        region: self.region,
        userId: self.userId,
        // 添加文件成功
        addFileSuccess: function (uploadInfo) {
          // console.log("addFileSuccess: " + uploadInfo.file.name)
        },
        //开始上传
        onUploadstarted: function (uploadInfo) {
            //此处从接口拿videoId和凭证地址
            if (!uploadInfo.VideoId) {
              let formData = new FormData();
              formData.append('fileName',uploadInfo.file.name)
              uploadGet(formData).then(res=>{
                self.UploadAddress=res.data.UploadAddress
                self.UploadAuth=res.data.UploadAuth
                self.VideoId=res.data.VideoId
                uploader.setUploadAuthAndAddress(uploadInfo,self.UploadAuth,self.UploadAddress,self.VideoId)
              })
            }else{
              uploader.setUploadAuthAndAddress(uploadInfo, self.UploadAuth, self.UploadAddress,self.VideoId)
            }
        }，
        //文件上传成功
       onUploadSucceed: function (uploadInfo) {
           //此处可获取到文件链接以便后续提交
       },
       //文件上传进度，可以设置进度条数值
      onUploadProgress: function (uploadInfo, totalSize, progress) {
          //authProgress是我项目中的进度条字段，大家自行按需操作
           let progressPercent = Math.ceil(progress * 100)
            self.authProgress = progressPercent
       },
    })
    return uploader
}

当我们使用element-ui中的upload上传组件时，就可以使用自定义上传方法（http-request）

httpRequest(item){ 
    this.file = item.file
    //选择文件 
    var userData = '{"Vod":{}}' 
    this.uploader = this.createUploader() 
    this.uploader.addFile(this.file, null, null, null, userData) 
    //开始上传 
    this.uploader.startUpload() 
    //上传成功之后的操作可在onUploadSucceed钩子里实现 
 }