前端上传视频至阿里云

1、开通阿里云服务，获取userId

官方文档地址：https://help.aliyun.com/document_detail/52204.html?spm=a2c4g.11186623.6.915.51366bd19lzWGq

2、下载第三方js库：

放在src/assets/lib文件夹下

3、引入使用第三方库：

告诉angular去哪加载库

在angular.json中找到“scripts”节点，加入如下配置：

"scripts": [
    "src/assets/lib/aliyun-upload-sdk/lib/aliyun-oss-sdk-5.3.1.min.js",
    "src/assets/lib/aliyun-upload-sdk/aliyun-upload-sdk-1.5.0.min.js"
]

4、声明库中的对象

将oss-sdk中的OSS对象和upload-sdk中的AliyunUpload对象声明到typescript中，以便在其他组件中使用，如果不做该声明在其他组件中是无法使用这两个对象的，会出现编译错误。

在typings.d.ts文件中加入:

declare var OSS: any;
declare var AliyunUpload: any;

5、使用上传地址和凭证方式来上传视频

具体效果图：

html:

<input type="file" (change)="fileChange($event)">
<span class="progress">上传进度: {{authProgress}} %</span>

ts:

fileChange(e) {
    this.file = e.target.files[0]
    if (!this.file) {
      this.message.warning("请先选择需要上传的文件!")
      return
    }
    var userData = '{"Vod":{}}'
    if (this.uploader) {
      this.uploader.stopUpload()
      this.authProgress = 0
      this.statusText = ""
    }
    this.uploader = this.createUploader()
    console.log(userData)
    this.uploader.addFile(this.file, null, null, null, userData)
}
authUpload() {
    // 然后调用 startUpload 方法, 开始上传
    if (this.uploader !== null) {
      this.uploader.startUpload()
    }
}
createUploader() {
    let self = this
    let uploader = new AliyunUpload.Vod({
      timeout: 60000,
      partSize: 1048576,
      parallel: 5,
      retryCount: 3,
      retryDuration: 2,
      userId: '1510586187070032',
      // 添加文件成功
      addFileSuccess: function (uploadInfo) {
        self.statusText = '添加文件成功, 等待上传...'
        console.log("addFileSuccess: " + uploadInfo.file.name)
        self.authUpload();
      },
      // 开始上传
      onUploadstarted: function (uploadInfo) {
        // 如果是 UploadAuth 上传方式, 需要调用 uploader.setUploadAuthAndAddress 方法
        self.httpClient.post('/api/admin/video/uploadAuth', {
          file: uploadInfo.file.name,
          title: self.editData.name,
          poster: self.editData.poster
        }).subscribe((res: {}) => {
          const resData: any = res;
          let data = resData.result.message;
          self.editData.videoId = data.VideoId;
          uploader.setUploadAuthAndAddress(uploadInfo, data.UploadAuth, data.UploadAddress, data.VideoId)
        })
        self.statusText = '文件开始上传...'
        console.log("onUploadStarted:" + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object)
      },
      // 文件上传成功
      onUploadSucceed: function (uploadInfo) {
        console.log("onUploadSucceed: " + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object)
        self.statusText = '文件上传成功!'
      },
      // 文件上传失败
      onUploadFailed: function (uploadInfo, code, message) {
        console.log("onUploadFailed: file:" + uploadInfo.file.name + ",code:" + code + ", message:" + message)
        self.statusText = '文件上传失败!'
      },
      // 取消文件上传
      onUploadCanceled: function (uploadInfo, code, message) {
        console.log("Canceled file: " + uploadInfo.file.name + ", code: " + code + ", message:" + message)
        self.statusText = '文件已暂停上传'
      },
      // 文件上传进度，单位：字节, 可以在这个函数中拿到上传进度并显示在页面上
      onUploadProgress: function (uploadInfo, totalSize, progress) {
        console.log("onUploadProgress:file:" + uploadInfo.file.name + ", fileSize:" + totalSize + ", percent:" + Math.ceil(progress * 100) + "%")
        let progressPercent = Math.ceil(progress * 100)
        self.authProgress = progressPercent
        self.statusText = '文件上传中...'
      },
      // 上传凭证超时
      onUploadTokenExpired: function (uploadInfo) {
        // 上传大文件超时, 如果是上传方式一即根据 UploadAuth 上传时
        // 需要根据 uploadInfo.videoId 调用刷新视频上传凭证接口(https://help.aliyun.com/document_detail/55408.html)重新获取 UploadAuth
        // 然后调用 resumeUploadWithAuth 方法, 这里是测试接口, 所以我直接获取了 UploadAuth
        self.statusText = '文件超时...'
      },
      // 全部文件上传结束
      onUploadEnd: function (uploadInfo) {
        console.log("onUploadEnd: uploaded all the files")
        self.statusText = '文件上传完毕'
      }
    })
    return uploader
}

前端上传视频至阿里云

猜你喜欢