element-ui Upload 上传获取当前选择的视频时长
<el-upload
class="upload-demo"
ref="vidos"
:action="URL+'/api/post/file'"
:data="date"
:on-success="handleAvatarAUDIO"
:before-upload="beforeAvatarAUDIO" //将用到此方法
:on-progress="beforeAvatarUpload"
accept=".mp4"
:auto-upload="vidoauto"
:on-change="AvatarAUDIO"
:file-list="fileList"
>
beforeAvatarAUDIO(file){
let url = URL.createObjectURL(file)
var audioElement = new Audio(url)
audioElement.addEventListener('loadedmetadata',function(){
let playTime = audioElement.duration; //playTime就是当前视频长度
})
}
element-ui Upload 上传获取当前选择的视频时长的更多相关文章
- 封装Vue Element的upload上传组件
本来昨天就想分享封装的这个upload组件,结果刚写了两句话,就被边上的同事给偷窥上了,于是在我全神贯注地写分享的时候他就神不知鬼不觉地突然移动到我身边,腆着脸问我在干啥呢.卧槽你妈,当场就把我吓了一 ...
- vue+element ui 的上传文件使用组件
前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...
- 基于element UI 的上传插件
为了不再重复的上传文件,做了一个统一选择文件和上传文件的 基于 element UI :http://element-cn.eleme.io 前端实现文件下载和拖拽上传 演示 用法 <uploa ...
- 使用Element的upload上传组件,不使用action属性上传
1.需要实现的效果如下图,在点击提交的时候再提交file数据,和其他数据统一上传,我把file转换成了base64的格式,可以再上传之前显示缩略图 2.代码分析 action属性值为"#&q ...
- 用阿里官网提供的plupload oss的web直传,视频上传进行前端验证它的时长,尺寸,大小等。替换上一个不需要的单个视频
accessid = '' accesskey = '' host = '' policyBase64 = '' signature = '' callbackbody = '' filename = ...
- element ui图片上传方法
<!--商品图片--> <template v-slot:product_cover> <el-upload list-type="picture-card&q ...
- vue-resource+element upload上传(遇到formData总是变为object格式)
文件上传这种业务需求很常见,但是最近用了element,仔细看了文档,按照demo写了上传,与后台传参调取接口时,控制台总是显示未获取到文件,想了又想,发现一开始思路就跑遍了... 写此博记录下遇到的 ...
- UI标签库专题四:JEECG智能开发平台 Upload(上传标签)
1. Upload(上传标签) 1.1. 參数 属性名 类型 描写叙述 是否必须 默认值 id string 上传控件唯一标示 是 null name string 控件name 是 null ...
- easy ui 异步上传文件,跨域
easy ui 跨域上传文件,代码如下: 1.html代码:(这段代码是个win窗体,我在点击上传图片按钮然后弹出一个上传图片的窗体,选择图片再进行上传,这样在form提交时,提交的参数会少一点.) ...
随机推荐
- Centos7离线部署docker
下载docker离线包 wget https://download.docker.com/linux/static/stable/x86_64/docker-19.03.5.tgz 解压 tar -x ...
- 常用dos命令(4)
系统管理at 安排在特定日期和时间运行命令和程序shutdown立即或定时关机或重启taskkill结束进程(WinXPHome版中无该命令)tasklist显示进程列表(Windows XP Hom ...
- serverless 如何调试(三)
在上篇文章中,我们讲解了如何调用我们的hello-world应用,只需要使用命令: serverless invoke -f hello -l ,但是我们总不可能修改一次代码,就调用一下这个命令吧,或 ...
- JZOJ3492数数&&GDOI2018超级异或绵羊——位&&类欧几里得
JZOJ3492 数数(count) 我们知道,一个等差数列可以用三个数A,B,N表示成如下形式: B+A,B+2A,B+3A⋯B+NA ztxz16想知道对于一个给定的等差数列,把其中每一项用二进 ...
- 【电脑】xshell报:需要Xmanager软件来处理X11转发请求
https://www.netsarang.com/zh/xmanager/ 下载了就好了 我的图片出不来,下了就好了.
- docker自定义镜像上传阿里云
1.alpine制作jdk镜像 2.Alpine制作jre镜像(瘦身) 3.Docker镜像上传至阿里云 alpine制作jdk镜像 alpine Linux简介 1.Alpine Linux是一个轻 ...
- A 题解————2019.10.16
[题目描述] 对于给定的一个正整数n, 判断n是否能分成若干个正整数之和 (可以重复) ,其中每个正整数都能表示成两个质数乘积. [输入描述]第一行一个正整数 q,表示询问组数.接下来 q 行,每行一 ...
- JS 数组,对象常用方法 集合
数组 1.数组去重: 主要是使用的 new Set() 方法 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Referen ...
- Spring Security教程之退出登录logout(十)
要实现退出登录的功能我们需要在http元素下定义logout元素,这样Spring Security将自动为我们添加用于处理退出登录的过滤器LogoutFilter到FilterChain.当我们指定 ...
- CUDA学习笔记1
最近要做三维重建就学习一下cuda的一些使用. CUDA并行变成的基本四路是把一个很大的任务划分成N个简单重复的操作,创建N个线程分别执行. CPU和GPU,有各自的存储空间: Host, CPU a ...