<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/uploadAliyunVideo'" :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> video: { id: "", chapterId: "", courseId: "", title: "", sort: 0, isFree: 0, videoSourceId: "", videoOriginalName: "", //视频名称 }, formLabelWidth: "120px", fileList: [], //上传文件列表 BASE_API: process.env.BASE_API, // 接口API地址
此处注意fileList的数组格式是:
method
// ========================上传视频============================== beforeVodRemove(file, fileList) { return this.$confirm(`确定移除 ${file.name}?`); }, //删除视频 handleVodRemove(file, fileList) { console.log(file); vod.removeAlyVideo(this.video.videoSourceId).then((response) => { this.$message({ type: "success", message: response.message, }); this.fileList = [] this.video.videoSourceId = '' this.video.videoOriginalName = '' }); }, //成功回调 handleVodUploadSuccess(response, file, fileList) { this.video.videoSourceId = response.data.videoId; this.video.videoOriginalName = file.name; this.fileList = fileList }, //如果上传多于一个视频 handleUploadExceed(files, fileList) { this.$message.warning("想要重新上传视频,请先删除已上传的视频"); }, import request from '@/utils/request' const api_name = '/eduvod/video' //根据videoid 删除云端视频 export default { removeAlyVideo(videoId) { return request({ url: `${api_name}/removeAlyVideo/`+videoId, method: 'delete' }) }, }
测试