0
点赞
收藏
分享

微信扫一扫

视频处理-小节视频上传前端

洛茄 2022-06-01 阅读 117

在 nginx 当中配置上传地址与最大上传容量

视频处理-小节视频上传前端_Project

client_max_body_size 1024m;

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

在 api 当中创建 ​​vod.js​​ 前端请求文件

视频处理-小节视频上传前端_Project_02

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​​ 添加一个新的字段

视频处理-小节视频上传前端_ide_03

视频处理-小节视频上传前端_Project_04

在 chapte.vue 当中定义相关属性

视频处理-小节视频上传前端_ide_05

// 小节视频标题
videoOriginalName: ''

// 上传文件列表
fileList: [],
BASE_API: process.env.VUE_APP_BASE_API

导入 vod 请求文件

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

添加上传组件

视频处理-小节视频上传前端_上传视频_06

<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,&nbsp;file,&nbsp;fileList)&nbsp;{
&nbsp;&nbsp;// 获取当前上传视频的ID
&nbsp;&nbsp;this.contentVideo.videoSourceId&nbsp;=&nbsp;response.data.videoId;

&nbsp;&nbsp;// 获取当前上传视频标题
&nbsp;&nbsp;this.contentVideo.videoOriginalName&nbsp;=&nbsp;file.name;

&nbsp;&nbsp;// 设置文件名回显
&nbsp;&nbsp;this.fileList&nbsp;=&nbsp;[{&#39;name&#39;:&nbsp;this.contentVideo.videoOriginalName}];
},

// 已经超过了指定数量时,调用此方法
handleUploadExceed(files,&nbsp;fileList)&nbsp;{
&nbsp;&nbsp;this.$message.warning(&#39;请先删除已上传的视频!&#39;);
},

//删除之前提示信息
beforeVodRemove(file,&nbsp;fileList)&nbsp;{
&nbsp;&nbsp;return&nbsp;this.$confirm(`确定删除 ${file.name}?`);
},

//删除小节视频
handleVodRemove(file,&nbsp;fileList)&nbsp;{
&nbsp;&nbsp;vod.deleteVodById(this.contentVideo.videoSourceId).then(response&nbsp;=&gt;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;// 清空当前小节视频id
&nbsp;&nbsp;&nbsp;&nbsp;this.contentVideo.videoSourceId&nbsp;=&nbsp;&#39;&#39;;

&nbsp;&nbsp;&nbsp;&nbsp;// 清空当前小节视频标题
&nbsp;&nbsp;&nbsp;&nbsp;this.contentVideo.videoOriginalName&nbsp;=&nbsp;&#39;&#39;;
&nbsp;&nbsp;&nbsp;&nbsp;this.fileList&nbsp;=&nbsp;[];
&nbsp;&nbsp;&nbsp;&nbsp;this.$message({
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type:&nbsp;&#39;success&#39;,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;message:&nbsp;response.message
&nbsp;&nbsp;&nbsp;&nbsp;});
&nbsp;&nbsp;});
},

更改之前的小节编辑回显代码如下

editorContentVideo(id)&nbsp;{
&nbsp;&nbsp;this.dialogVideoFormVisible&nbsp;=&nbsp;true;

&nbsp;&nbsp;contentVideo.getVideoInfoById(id).then(res&nbsp;=&gt;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;this.contentVideo&nbsp;=&nbsp;res.data.item;

&nbsp;&nbsp;&nbsp;&nbsp;// 如果有视频, 显示视频标题
&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(this.contentVideo.videoOriginalName&nbsp;!==&nbsp;&#39;&#39;)&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.fileList&nbsp;=&nbsp;[{&#39;name&#39;:&nbsp;this.contentVideo.videoOriginalName}];
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;});
},

可能还有一个小问题后面在解决


举报

相关推荐

0 条评论