转码请求接⼝之前已经封装好了，⽂档中显示有许多请求参数，其实只需要主要的 4 个参数： lessonId 课时 ID 需要在上传视频跳转时添加相应参数 coverImageUrl 封⾯图⽚地址 fileId 视频 ID fileName 视频名称

更新跳转时设置的参数

// section.vue … type=“success” @click=“$router.push({ name: ‘course-video’, params: { courseId }, query: { lessonId: data.id } })” >上传视频

当所有⽂件都上传完毕后才能进⾏转码，应在 onUploadEnd 回调中操作

// video.vue … data () { return { … videoId: null } }, … onUploadstarted: async uploadInfo => { … if (uploadInfo.isImage) { … } else { … if (data.code === ‘000000’) { … this.videoId = data.data.videoId } } … }, … // 全部⽂件上传结束 onUploadEnd: async uploadInfo => { // 调⽤接⼝ const { data } = await aliyunVideoTranscode({ lessonId: this.$route.query.lessonId, coverImageUrl: this.imageURL, fileName: this.$refs[‘video-file’].files[0].name, fileId: this.videoId }) console.log(data) }

转码请求发送后，还需轮询转码进度。

// video.vue … onUploadEnd: async uploadInfo => { const { data } = await aliyunVideoTranscode({ … }) if (data.code === ‘000000’) { // 转码开始后，需要轮询转码进度 const timer = setInterval(async () => { const { data } = getAliyunTranscodePercent(this.$route.quer y.lessonId) if (data === 100) { // 当上传进度为 100，停⽌定时器，并进⾏提示 clearInterval(timer) this.$message.success(‘转码成功’) } }, 1000) } } …

测试转码成功，前台⻚⾯查看视频成功即可。

最后将转码进度展示在视图中便于观察。

// video.vue data () { return { … uploadPercent: 0, isUploadSuccess: false, isTranscodeSuccess: false } }, … <el-form-item> <p v-if=“uploadPercent !== 0”>视频上传中：{{ uploadPercent }}%</p> <p v-if=“isUploadSuccess”>视频转码中：{{ isTranscodeSuccess ? ‘完 成’ : ‘正在转码，请稍后…’ }} </p> </el-form-item> … // ⽂件上传进度，单位：字节 // - 修改为箭头函数，内部 this 才能访问 Vue 实例 onUploadProgress: (uploadInfo, totalSize, loadedPercent) => { console.log(‘onUploadProgress’, uploadInfo, totalSize, loadedPercent) // 只对视频上传进度进⾏监测即可 if (!uploadInfo.isImage) { this.uploadPercent = Math.floor(loadedPercent * 100) } }, … // 全部⽂件上传结束 onUploadEnd: async uploadInfo => { this.isUploadSuccess = true … if (data === 100) { this.isTranscodeSuccess = true … } … }, … handleUpload () { // 点击上传时重置状态信息 this.isTranscodeSuccess = false this.isUploadSuccess = false this.uploadPercent = 0 … } …