前端整合阿里云视频上传

我不是女神ヾ 2021-07-24 15:59 515阅读 0赞

# 一 模板和数据绑定 #

## 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"
              :before-remove="handleBeforeRemove"
              :on-remove="handleOnRemove"
              :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>
        </el-form>

# 二 回调函数和上传 #

## 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
    
    
            // debugger
          } else {
            this.$message.error('上传失败（非20000）')
          }
        },
    
    
        // 失败回调
        handleUploadError() {
          this.uploadBtnDisabled = false
          this.$message.error('上传失败（http）')
        },

## 4 重置视频上传列表 ##

// 重置
        resetForm() {
          this.video = {
            sort: 0,
            free: false
          }
          // 清空文件列表
          this.fileList = []
        },

# 三 回显 #

## 1 修改时回显视频 ##

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

# 四 测试 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/bcfa91b4a6bb4e5fa3acf417dd0637b1.png