element UI el-upload组件实现视频文件上传视频回显

原创

于 2023-08-16 14:18:52 发布 · 1.9k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript #ui #音视频

项目中需要提供一个视频介绍，使用Vue+Element UI中的el-upload组件实现视频上传及进度条展示，后台提供视频上传API并返回URL，百度找了一番后最终实现了。

HTML

<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"
     :headers="headers"   //头部携带的token 非必须
     >
     <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" //i标签是上传前的那个+上传后隐藏
     class="el-icon-plus avatar-uploader-icon"
     ><