antd vue upload组件上传视频并实现视频预览

html代码

 <form><a-form-itemlabel="商品视频":labelCol="{span: 4}":wrapperCol="{span: 18}"><a-uploadv-decorator="['videoUrl',{valuePropName: 'fileList',getValueFromEvent: normFile,rules: [{required: true, message: '请上传商品视频！'}]},]"name="file":action="action":headers="uploadHeaders":accept="'video/mp4'"list-type="picture-card"@change="videoUploadChange":before-upload="videoBeforeUpload":preview-file="previewVideoFile"@preview="videoPreview"><div ><a-icon type="plus" /><div class="ant-upload-text">Upload</div></div><a-modal :visible="videoPreviewVisible" :footer="null"  @cancel="videoPreviewCancel" ><video width="100%" height="600px;"  controls="controls" id="video">您的浏览器不支持播放该视频！</video></a-modal></a-upload></a-form-item></form>

js

<script>import {getAuthorization} from '@/utils/cookieUtil'export default {watch: {//预览并播放视频时,如果关闭了弹框,电脑还有视频的声音,监听视频预览的弹框的打开/关闭,如果关闭了弹框就让video不要播放了videoPreviewVisible: function (val) {if(val === false){const video = document.getElementById('video')video.pause()}}},data() {uploadHeaders: {Authorization: getAuthorization()},      //这里是从cookie中取token值,后台鉴权用的action:  process.env.VUE_APP_API_BASE_URL+'/upload/oss',videoPreviewVisible: false,},methods: {normFile(e) {//本方法作用,因为我的业务是只能上传一个视频,因此每次上传时只保留uoload组件的fileList字段的最后一个值作为提交给后台的数据if (Array.isArray(e)) {return e;}if(e && e.fileList){//截取最后一个元素,返回只包含最后一个元素的数组let fileList = e.fileList.slice(-1);fileList = fileList.map(file => {if (file.response) {// Component will show file.url as linkfile.url = file.response.data;  //file.response.data是后台返回的当前视频上传成功后入库的url}return file;});e.fileList = fileList}return e && e.fileList;},videoUploadChange({file, fileList  }) {if(file.status === 'error'){fileList.pop()this.$message.error("上传失败!")}},videoBeforeUpload(file) {const isLt10M = file.size / 1024 / 1024 < 10;if (!isLt10M) {this.$message.error('视频大小不能超过10M!');}return isLt10M},videoPreview(file){//预览视频的方法this.videoPreviewVisible = true;this.$nextTick(() => { //这里一定要使用nextTick,否则document将找不到id为video的节点,因为modal框初始为隐藏状态,<video id='video'>标签初始在dom树中并不存在const video = document.getElementById('video')video.src = file.url});},videoPreviewCancel(){this.videoPreviewVisible = false},}}
</script>

最终效果,点击上传后的视频有个小眼睛的图标,在弹框中可以预览视频

antd vue upload组件上传视频并实现视频预览相关推荐

Antd的Upload组件上传文件控制文件数量、格式等，以及提交时如何获取文件
背景:使用React的antd组件的Upload(官网),要求文件上传后,在点击提交时再将文件传过去. 技术点: 完全控制的文件上传. 可控制上传数量. 控制文件格式. 移除时的事件onRemove. ...
antd Upload组件上传状态一直处于uploading
antd Upload组件上传状态一直处于uploading 对于受控模式,需要在 onChange 中始终 setState fileList,保证所有状态同步到 Upload 内 import { ...
element-ui upload组件上传文件类型限制
element-ui upload组件上传文件类型限制 <el-uploadclass="c-upload"ref="upload":action=&q ...
ant design Upload组件上传文件类型
Upload组件上传文件类型设置 1.设置上传文件类型为excel <template><a-uploadname="file":multiple="t ...
SpringBoot+Vue+OpenOffice实现文档管理(文档上传、下载、在线预览)
场景 SpringBoot集成OpenOffice实现doc文档转html: SpringBoot集成OpenOffice实现doc文档转html_BADAO_LIUMANG_QIZHI的博客-CSD ...
java 预览zip_java压缩包上传，解压，预览(利用editor.md和Jstree实现)和下载
java压缩包上传,解压,预览(利用editor.md和Jstree实现)和下载实现功能:zip文件上传,后台自动解压,Jstree树目录(遍历文件),editor.md预览采用Spring+Sp ...
java 上传文件及预览_SpringBoot上传下载文件及在线预览
SpringBoot上传下载文件及在线预览今天大概就说说如何使用SpringBoot进行上传和下载以及在线预览文件本篇主要介绍上传下载的功能,对于界面就简单一点,大致如下: 一.老规矩还是先看看小 ...
SpringBoot上传下载文件及在线预览
SpringBoot上传下载文件及在线预览今天大概就说说如何使用SpringBoot进行上传和下载以及在线预览文件本篇主要介绍上传下载的功能,对于界面就简单一点,大致如下: 一.老规矩还是先看看小 ...
java图片预览上传_java实现文件上传、下载、图片预览
这篇文章主要介绍了java实现文件上传.下载.图片预览,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下多文件保存到本地: @ResponseBody ...

antd vue upload组件上传视频并实现视频预览

antd vue upload组件上传视频并实现视频预览

html代码

js

最终效果,点击上传后的视频有个小眼睛的图标,在弹框中可以预览视频

antd vue upload组件上传视频并实现视频预览相关推荐

最新文章

热门文章