Vue上传视频组件

整合上传组件

<el-form-item label="上传视频">
<el-upload
:on-success="handleVodUploadSuccess"
:on-remove="handleVodRemove"
:before-remove="beforeVodRemove"
:on-exceed="handleUploadExceed"
:file-list="fileList"
:action="BASE_API+'/admin/vod/video/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>

方法定义

import vod from '@/api/edu/vod'
//数据定义
//写核心代码的位置
export default {
data() {
return {
fileList: [],//上传文件列表
BASE_API: process.env.BASE_API ,// 接口API地址
video: {// 课时对象
title: '',
sort: 0,
free: false,
videoSourceId: '',
videoOriginalName: ''
},
};
},
created() {//渲染前执行

},
watch: {

},
methods: {
//成功回调
handleVodUploadSuccess(response, file, fileList) {
this.video.videoSourceId = response.data.videoId
this.video.videoOriginalName = file.name;
},
//修改回掉
editVideo(videoId) {
this.dialogVideoFormVisible = true
video.getVideoInfoById(videoId).then(response => {
this.video = response.data.item
this.fileList = [{'name': this.video.videoOriginalName}]
})
},
//视图上传多于一个视频
handleUploadExceed(files, fileList) {
this.$message.warning('想要重新上传视频，请先删除已上传的视频')
},

beforeVodRemove(file, fileList) {
return this.$confirm(`确定移除 ${file.name}？`)
},
handleVodRemove(file, fileList) {
console.log(file)
vod.removeById(this.video.videoSourceId).then(response=>{
this.$message({
type: 'success',
message: response.message
})
})
},
handleVodRemove(file, fileList) {
console.log(file)
vod.removeById(this.video.videoSourceId).then(response => {
this.video.videoSourceId = ''
this.video.videoOriginalName = ''
this.fileList = []
this.$message({
type: 'success',
message: response.message
})
})
},




}

};

 

参考文章：http://blog.ncmem.com/wordpress/2023/11/03/vue%e4%b8%8a%e4%bc%a0%e8%a7%86%e9%a2%91%e7%bb%84%e4%bb%b6/

欢迎入群一起讨论