(85)Part22-课程视频上传-02-前端整合视频上传

一、模板和数据绑定

在 src/views/course/components/Video/Form.vue中定义

1、数据定义

fileList: [],//上传文件列表
uploadBtnDisabled: false

2、整合上传组件

<!-- 上传视频 -->
<el-form-item label="上传视频">
    <el-upload
               ref="upload"
               :auto-upload="false"
               :on-success="handleUploadSuccess"
               :on-error="handleUploadError"
               :on-exceed="handleUploadExceed"
               :file-list="fileList"
               :limit="1"
               action="http://127.0.0.1:8130/admin/vod/media/upload">
        <el-button slot="trigger" size="small" type="primary">选择视频</el-button>
        <el-button
                   :disabled="uploadBtnDisabled"
                   style="margin-left: 10px;"
                   size="small"
                   type="success"
                   @click="submitUpload()">上传</el-button>
    </el-upload>
</el-form-item>

二、回调函数和上传

1、上传限制

//上传多于一个视频
handleUploadExceed(files, fileList) {
  this.$message.warning('想要重新上传视频，请先删除已上传的视频')
},

2、上传方法

// 上传
submitUpload() {
    this.uploadBtnDisabled = true
    this.$refs.upload.submit() // 提交上传请求
}

3、成功和失败回调

// 视频上传成功的回调
handleUploadSuccess(response, file, fileList) {
  this.uploadBtnDisabled = false
  if (response.success) {
    this.video.videoSourceId = response.data.videoId
    this.video.videoOriginalName = file.name
  } else {
    this.$message.error('上传失败1')
  }
},

// 失败回调
handleUploadError() {
  this.uploadBtnDisabled = false
  this.$message.error('上传失败2')
},

4、重置视频上传列表

在 src/views/course/components/Video/Form.vue

resetForm() {
    this.video = ......

    this.fileList = [] //重置视频上传列表
},

三、回显

1、修改时回显视频

Video/Form.vue 中open方法中获取数据后添加 “回显” 部分代码

open(chapterId, videoId) {
    this.dialogVisible = true
    this.video.chapterId = chapterId
    if (videoId) {
        videoApi.getById(videoId).then(response => {
            this.video = response.data.item
            // 回显
            if (this.video.videoOriginalName) {
                this.fileList = [{ 'name': this.video.videoOriginalName }]
            }
        })
    }
},