【ElementUI组件】视频上传+计算视频时长
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
效果如下:
实现步骤:
1.首先先安装官网的操作步骤安装elementui 或者 不安装直接引入
安装指令:
npm i element-ui -S
引入方式:
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
2.以下是参考代码
HTML代码:
<div>
<el-upload
class="upload-demo"
action="/api/common/uploadFile"
:on-remove="onRemove"
:file-list="videoUrl"
:on-success="onSuccess"
:before-upload="beforeUpload"
limit="1">
<el-button
size="small"
type="primary">
点击上传
</el-button>
<div slot="tip"
class="el-upload__tip">
只能
mp4文件,且不超过1GB
</div>
</el-upload>
</div>
data中添加:
videoUrl: [],//视频,一定要是一个数组
js代码:
//视频移除时
onRemove() {
this.videoUrl = []
this.form.classHourTime = ''
},
//视频上传成功
onSuccess(response, res, file) {
let arr = [
{
name: '',
url: '',
},
]
if (response.code == 200) {
arr[0].name = file[0].name
arr[0].url = response.data.url
this.$message({
message: '上传成功',
type: 'success',
})
var audio = new Audio(arr[0].url)
audio.addEventListener('loadedmetadata', () => {
this.form.classHourTime = audio.duration
})
}
this.videoUrl = arr
},
//视频上传成功
onSuccess(response, res, file) {
let arr = [
{
name: '',
url: '',
},
]
//如果往 action 地址上传视频成功则会有一个返回值(后端配置)
if (response.code == 200) {
arr[0].name = file[0].name
arr[0].url = response.data.url
this.$message({
message: '上传成功',
type: 'success',
})
// 通过URL获取视频时长
var audio = new Audio(arr[0].url)
audio.addEventListener('loadedmetadata', () => {
//返回的是 秒 格式的时间
this.form.classHourTime = audio.duration
})
}
this.form.classHourTime = this.getTime(this.form.classHourTime)
this.videoUrl = arr
},
//时间转换 秒转时分秒
getTime(time) {
let h = parseInt((time / 60 / 60) % 24)
h = h < 10 ? '0' + h : h
let m = parseInt((time / 60) % 60)
m = m < 10 ? '0' + m : m
let s = parseInt(time % 60)
s = s < 10 ? '0' + s : s
let ms = `${m}:${s}`
// 作为返回值返回
return ms
},
计算视频时长如下:
上传视频成功后,接口会返回一个地址,用这个地址就可以获取视频时长
// 通过URL获取视频时长
var audio = new Audio(arr[0].url)
audio.addEventListener('loadedmetadata', () => {
//返回的是 秒 格式的时间
this.form.classHourTime = audio.duration
})
上传视频成功:
如果需要其格式的时间,请参考上篇博客
【JS】常用的4种时间格式转换
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45
5 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 5 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)