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: '', //轮播图上传成功后返回的文件idduration: 0,dialogVideoUrl: '', // 视频放大查看urldialogVisible: false, // 视频放大查看弹窗videoUploadPercent: 0, // 视频上传进度videoFlag: false, // 是否展示视频上传进度icon}}

    // 视频上传成功protocolSuccess(res, file) {if (file.response.code == 200) {this.fileId = res.datathis.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;
}