1、nginx添加上传视频地址配置
2、在course/chapter.vue
页面添加上传文件的组件
java
<el-form-item label="上传视频">
<el-upload
:on-success="handleVodUploadSuccess"
:on-remove="handleVodRemove"
:before-remove="beforeVodRemove"
:on-exceed="handleUploadExceed"
:file-list="fileList"
:action="BASE_API+'/eduvod/video/uploadVideo'"
: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>
3、修改course/chapter.vue
页面实现js
java
data() {
return {
courseId: "",
saveBtnDisabled: false, // 保存按钮是否禁用
allChapterVideo: [], //章节小节数据集合
dialogChapterFormVisible: false, //章节添加修改表单是否展示
chapter: {}, //章节信息
dialogVideoFormVisible: false, //小节添加修改表单是否展示
video: {}, //小节信息
fileList: [], //上传文件列表
BASE_API: process.env.BASE_API // 接口API地址
};
},
methods: {
//上传成功后回调
handleVodUploadSuccess(response, file, fileList) {
this.video.videoSourceId = response.data.videoId;
},
//视图上传多于一个视频
handleUploadExceed(files, fileList) {
this.$message.warning("想要重新上传视频,请先删除已上传的视频");
},
4、上传视频测试,出现了413错误
(1)nginx抛出问题,请求体过大
(2)修改nginx配置,重新加载生效
java
client_max_body_size 1024m;
在cmd下运行命令:nginx.exe -s reload