[TOC]

第⼀步下载完毕，使⽤JavaScript上传SDK中的下⼀步我们需要初始化上传实例。

// 官⽅示例：声明 AliyunUpload.Vod 初始化回调。 var uploader = new AliyunUpload.Vod({ //阿⾥账号ID，必须有值 userId:“122”, //上传到视频点播的地域，默认值为‘cn-shanghai’，//eu-central-1，ap-sou theast-1 region:“”, //分⽚⼤⼩默认1 MB，不能⼩于100 KB partSize: 1048576, //并⾏上传分⽚个数，默认5 parallel: 5, //⽹络原因失败时，重新上传次数，默认为3 retryCount: 3, //⽹络原因失败时，重新上传间隔时间，默认为2秒 retryDuration: 2, //开始上传 ‘onUploadstarted’: function (uploadInfo) { }, //⽂件上传成功 ‘onUploadSucceed’: function (uploadInfo) { }, //⽂件上传失败 ‘onUploadFailed’: function (uploadInfo, code, message) { }, //⽂件上传进度，单位：字节 ‘onUploadProgress’: function (uploadInfo, totalSize, loadedPerc ent) { }, //上传凭证超时 ‘onUploadTokenExpired’: function (uploadInfo) { }, //全部⽂件上传结束 ‘onUploadEnd’:function(uploadInfo){ } });

设置到 video.vue 中：

userId 为后端提供的（例如开通阿⾥云服务的⼈员将 ID 告知你） AliYunUpload 可以添加 window 访问 这⾥提供测试 ID 为：’1618139964448548’

处理其他内容与格式

// course/video.vue …

给上传按钮添加点击事件

// video.vue … type=“primary” @click=“handleUpload” >开始上传 …

点击获取⽂件

⽂件域添加 ref 通过 $refs 读取 // video.vue … label=“视频上传”> ref=“video-file” type=“file”> label=“封⾯上传”> ref=“image-file” type=“file”> …

从⽂档中可以找到将⽂件添加到上传列表的⽅式，进⾏相应处理。

uploader.addFile() 将⽂件添加到上传列表，多次调⽤会按顺序发送⽂件（后期由于接⼝要求要先发图）

uploader.startUpload() 开始上传

handleUpload () { // 获取上传的⽂件（视频、图⽚） const videoFile = this.$refs[‘video-file’].files[0] const imageFile = this.$refs[‘image-file’].files[0] // 将⽂件添加到上传列表 const uploader = this.uploader // - ⽂档示例：uploader.addFile(event.target.files[i], null, nul l, null, paramData) uploader.addFile(imageFile) uploader.addFile(videoFile) // 开始上传 // - 开始上传后，上⾯的⽂件回按添加的顺序依次上传 // - 这时会触发 onUploadStarted 事件 uploader.startUpload() } 触发上传后，⽂件并没有真正开始上传，因为还需要发送上传凭证和地址，这⾥需要使⽤到后端提供的接⼝。 实际执⾏流程： 调⽤ uploader.startUpload() 调⽤⽅法开始上传 调⽤ uploader.setUploadAuthAndAddress() 设置上传凭证和地址（在 onUploadStarted 钩⼦ 中） 凭证需要调⽤后端接⼝获得。 凭证没有问题，上传开始执⾏。

初始化阿⾥云上传 - 图1

下⼀步我们需要封装上传凭证接⼝并进⾏调⽤处理。