项目中需要提供一个视频介绍，使用户能够快速、方便的了解如何使用产品以及注意事项。
前台使用Vue+Element UI中的el-upload组件实现视频上传及进度条展示，后台提供视频上传API并返回URL。
二、具体实现 1、效果图展示
<div class="album albumvideo"> <div> <p class="type_title"> <span>视频介绍</span> </p> <div class="pic_img"> <div class="pic_img_box"> <el-upload class="avatar-uploader" action="上传地址" v-bind:data="{FoldPath:'上传目录',SecretKey:'安全验证'}" v-bind:on-progress="uploadVideoProcess" v-bind:on-success="handleVideoSuccess" v-bind:before-upload="beforeUploadVideo" v-bind:show-file-list="false"> <video v-if="videoForm.showVideoPath !='' && !videoFlag" v-bind:src="videoForm.showVideoPath" class="avatar video-avatar" controls="controls"> 您的浏览器不支持视频播放 </video> <i v-else-if="videoForm.showVideoPath =='' && !videoFlag" class="el-icon-plus avatar-uploader-icon"></i> <el-progress v-if="videoFlag == true" type="circle" v-bind:percentage="videoUploadPercent" style="margin-top:7px;"></el-progress> </el-upload> </div> </div> </div> <p class="Upload_pictures"> <span></span> <span>最多可以上传1个视频，建议大小50M，推荐格式mp4</span> </p> </div>