<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 上传获取当前选择的视频时长的更多相关文章

  1. 封装Vue Element的upload上传组件

    本来昨天就想分享封装的这个upload组件,结果刚写了两句话,就被边上的同事给偷窥上了,于是在我全神贯注地写分享的时候他就神不知鬼不觉地突然移动到我身边,腆着脸问我在干啥呢.卧槽你妈,当场就把我吓了一 ...

  2. vue+element ui 的上传文件使用组件

    前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...

  3. 基于element UI 的上传插件

    为了不再重复的上传文件,做了一个统一选择文件和上传文件的 基于 element UI :http://element-cn.eleme.io 前端实现文件下载和拖拽上传 演示 用法 <uploa ...

  4. 使用Element的upload上传组件,不使用action属性上传

    1.需要实现的效果如下图,在点击提交的时候再提交file数据,和其他数据统一上传,我把file转换成了base64的格式,可以再上传之前显示缩略图 2.代码分析 action属性值为"#&q ...

  5. 用阿里官网提供的plupload oss的web直传,视频上传进行前端验证它的时长,尺寸,大小等。替换上一个不需要的单个视频

    accessid = '' accesskey = '' host = '' policyBase64 = '' signature = '' callbackbody = '' filename = ...

  6. element ui图片上传方法

    <!--商品图片--> <template v-slot:product_cover> <el-upload list-type="picture-card&q ...

  7. vue-resource+element upload上传(遇到formData总是变为object格式)

    文件上传这种业务需求很常见,但是最近用了element,仔细看了文档,按照demo写了上传,与后台传参调取接口时,控制台总是显示未获取到文件,想了又想,发现一开始思路就跑遍了... 写此博记录下遇到的 ...

  8. UI标签库专题四:JEECG智能开发平台 Upload(上传标签)

     1. Upload(上传标签) 1.1.  參数 属性名 类型 描写叙述 是否必须 默认值 id string 上传控件唯一标示 是 null name string 控件name 是 null ...

  9. easy ui 异步上传文件,跨域

    easy ui 跨域上传文件,代码如下: 1.html代码:(这段代码是个win窗体,我在点击上传图片按钮然后弹出一个上传图片的窗体,选择图片再进行上传,这样在form提交时,提交的参数会少一点.) ...

随机推荐

  1. HDU - 5126: stars (求立方体内点数 CDQ套CDQ)

    题意:现在给定空空的三维平面,有加点操作和询问立方体点数. 思路:考虑CDQ套CDQ.复杂度是O(NlogN*logN*logN),可以过此题. 具体的,这是一个四维偏序问题,4维分别是(times, ...

  2. linux 挂载磁盘LVM

    最近又有个坑逼任务: 在客户给的三台虚拟机上在安装集群环境,,虚拟机没挂载磁盘 要配置成LV卷:大致理解逻辑之后理解为:LV卷后续方便做扩容 理论参考:https://www.cnblogs.com/ ...

  3. VIJOS-P1294 拯救OIBH总部

    洛谷 P1506 拯救oibh总部 洛谷传送门 JDOJ:1405: VIJOS-P1294 拯救OIBH总部 JDOJ传送门 Description OIBH被突来的洪水淹没了> .< ...

  4. java 8 学习一(概述)

    学习java8的新特性之前,简单看了下从java5开始历代版本的新特性,都是别人总结的. java5.java6.java7.java8的新特性 http://blog.csdn.net/samjus ...

  5. git blame (10)

    git blame system_server.c 每一行提交的sha ,作者,提交的日期及提交的信息

  6. Chrome DevTools的使用

    一.Chrome DevTools 简介 Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具,可用来对网站进行迭代.调试和分析 手册:Chrome 开发者工具中文手 ...

  7. OpenResty: 介绍 (摘抄)

    原文链接:https://www.cnblogs.com/duanxz/p/10396160.html Nginx 是俄罗斯人发明的, Lua 是巴西几个教授发明的,中国人章亦春把 LuaJIT VM ...

  8. [RN] 解决小米手机安装应用报:INSTALL_FAILED_USER_RESTRICTED问题

    解决小米手机安装应用报:INSTALL_FAILED_USER_RESTRICTED问题 https://blog.csdn.net/u013023845/article/details/821082 ...

  9. 第02组 Alpha冲刺(2/4)

    队名:十一个憨批 组长博客 作业博客 组长黄智 过去两天完成的任务:写博客,复习C语言 GitHub签入记录 接下来的计划:构思游戏实现 还剩下哪些任务:敲代码 燃尽图 遇到的困难:Alpha冲刺时间 ...

  10. Spring Boot 知识笔记(创建maven项目、HTTP接口)

    一.使用Maven手工创建SpringBoot应用(IDEA) 1.  点击File——New——Project——Maven——Next,填写相关信息,创建项目. 2.  在pom.xml中添加相关 ...