el-upload上传视频,并且显示上传的视频
<el-form-item>
<label slot="label"><span style="color:#F56C6C">*</span> 视频</label>
<el-upload class="upload-demo" style="width:360px" :action="picUploadApi" :before-upload="beforeUpload"
:on-success='protocolSuccess' multiple :limit="1" list-type="picture-card" :on-progress="uploadVideoProcess"
:on-preview="handlePictureCardPreview" :on-remove="protocolRemove" :show-file-list="false"
:file-list="fileList" accept=".mp4" :disabled="fileId != '' || videoFlag">
<i class="el-icon-circle-close" v-if="fileId != ''" @click="protocolRemove"></i>
<video v-if="fileId != ''" :src="picApi + '?fileId=' + fileId" class="video-avatar" controls="controls">
您的浏览器不支持视频播放
</video>
<i v-if="!videoFlag" :class="{ 'hide': fileList.length === 1 }" class="el-icon-plus"></i>
<el-progress v-if="videoFlag == true" type="circle" :percentage="videoUploadPercent"
class="video-progress"></el-progress>
<div slot="tip" :class="{ 'el-upload__tip': true, 'hide': fileList.length === 1 }">只能上传mp4文件</div>
</el-upload>
<div v-if="fileId != ''" class="video-cover"></div>
</el-form-item>
data(){
return {
picUploadApi: this.api.uploadFile, // 上传视频
picApi: this.api.loadPicById, // 显示视频
fileList: [], // 视频上传数据
fileId: '', //轮播图上传成功后返回的文件id
duration: 0,
dialogVideoUrl: '', // 视频放大查看url
dialogVisible: false, // 视频放大查看弹窗
videoUploadPercent: 0, // 视频上传进度
videoFlag: false, // 是否展示视频上传进度icon
}
}
// 视频上传成功
protocolSuccess(res, file) {
if (file.response.code == 200) {
this.fileId = res.data
this.fileList.push(file)
this.getVideoTime(file)
} else {
this.$message({
message: file.response.message,
type: "error",
});
}
},
/* 上传控件样式 */
.el-icon-circle-close {
position: absolute;
z-index: 999;
right: 75PX;
}
.el-icon-plus.hide {
display: none;
}
.video-progress {
margin-top: 17PX;
position: absolute;
left: 17PX;
}
.video-avatar {
height: 160PX;
}
.el-upload__tip.hide {
display: none;
}
.video-cover {
width: 360PX;
height: 100PX;
/* background: rgba(0,0,0,0.3); */
position: absolute;
top: 0;
}
*/deep/.upload-demo>.el-upload-list>.el-upload-list__item>.el-upload-list__item-name {
color: #fff;
}
*/deep/.upload-demo>.el-upload-list>.el-upload-list__item:hover {
background-color: #024e9f;
}
*/deep/.upload-demo>.el-upload-list>.el-upload-list__item>.el-upload-list__item-name>i {
color: #fff;
}
*/deep/.upload-demo>.el-upload-list>.el-upload-list__item>i {
color: #fff;
}
/* 上传控件视频样式 */
.upload-img-wrapper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-bottom: 15px;
}
*/deep/.upload-demo.hide {
/* display: flex; */
height: 60px;
}
*/deep/.upload-demo>.el-upload-list--picture-card>.el-upload-list__item.is-success {
width: 60px;
height: 60px;
margin-right: 15px;
}
*/deep/.upload-demo>.el-upload--picture-card {
width: 160px;
height: 160px;
line-height: 165px;
}