視訊處理-小節視訊上傳前端

在 nginx 當中配置上傳位址與最大上傳容量

client_max_body_size 1024m;      

location ~ /service_vod {
  proxy_pass http://localhost:8003;
}      

在 api 當中建立 ​

​vod.js​

​ 前端請求檔案

import request from '@/utils/request'

const API_NAME = '/service_vod/vod'

export default {
  deleteVodById(id) {
    return request({
      url: `${API_NAME}/delete_vod/${id}`,
      method: 'post'
    });
  }
}      

修改後端首先是接口路徑名稱如下，然後緊接着就是修改 ​

​ContentVideoInfoVO​

​ 添加一個新的字段

在 chapte.vue 當中定義相關屬性

// 小節視訊标題
videoOriginalName: ''      

// 上傳檔案清單
fileList: [],
BASE_API: process.env.VUE_APP_BASE_API      

導入 vod 請求檔案

import void from "@/api/video/vod/vod";      

添加上傳元件

<el-form-item label="上傳視訊">
  <!-- 上傳視訊 -->
  <el-upload
    :on-success="handleVodUploadSuccess"
    :on-remove="handleVodRemove"
    :before-remove="beforeVodRemove"
    :on-exceed="handleUploadExceed"
    :file-list="fileList"
    :action="BASE_API+'/service_vod/vod/upload'"
    :limit="1"
    class="upload-demo">
    <el-button size="small" type="primary">上傳視訊</el-button>
    <el-tooltip placement="right-end">
      <div slot="content">最大支援1G，<br>
        支援3GP、ASF、AVI、DAT、DV、FLV、F4V、<br>
        GIF、M2T、M4V、MJ2、MJPEG、MKV、MOV、MP4、<br>
        MPE、MPG、MPEG、MTS、OGG、QT、RM、RMVB、<br>
        SWF、TS、VOB、WMV、WEBM 等視訊格式上傳
      </div>
      <i class="el-icon-question"/>
    </el-tooltip>
  </el-upload>
</el-form-item>      

定義元件方法

//自動上傳成功回調
handleVodUploadSuccess(response, file, fileList) {
  // 擷取目前上傳視訊的ID
  this.contentVideo.videoSourceId = response.data.videoId;

  // 擷取目前上傳視訊标題
  this.contentVideo.videoOriginalName = file.name;

  // 設定檔案名回顯
  this.fileList = [{'name': this.contentVideo.videoOriginalName}];
},      

// 已經超過了指定數量時,調用此方法
handleUploadExceed(files, fileList) {
  this.$message.warning('請先删除已上傳的視訊!');
},      

//删除之前提示資訊
beforeVodRemove(file, fileList) {
  return this.$confirm(`确定删除 ${file.name}？`);
},      

//删除小節視訊
handleVodRemove(file, fileList) {
  vod.deleteVodById(this.contentVideo.videoSourceId).then(response => {
    // 清空目前小節視訊id
    this.contentVideo.videoSourceId = '';

    // 清空目前小節視訊标題
    this.contentVideo.videoOriginalName = '';
    this.fileList = [];
    this.$message({
      type: 'success',
      message: response.message
    });
  });
},      

editorContentVideo(id) {
  this.dialogVideoFormVisible = true;

  contentVideo.getVideoInfoById(id).then(res => {
    this.contentVideo = res.data.item;

    // 如果有視訊, 顯示視訊标題
    if (this.contentVideo.videoOriginalName !== '') {
      this.fileList = [{'name': this.contentVideo.videoOriginalName}];
    }
  });
},