vue3用elementui上传组件上传视频时携带视频长度信息

在项目中有个需求就是要统计视频时长，本来打算在springboot里上传后做，想了半天还是打算在vue里做，原本想的很好，选择视频后将响应式数据中的值设为时长就好了，设置upload组件中onchange事件，用资源链接创建audio对象后再他上面添加监听器，获取对象的duration属性获取时长，然后this.time=duration

<el-upload action="api/uploadVideo"
:on-change="logTime">
<el-button type="primary">更改视频</el-button>
</el-upload>
logTime(file) {
var url = URL.createObjectURL(file.raw);
var audioElement = new Audio(url);
var duration;
audioElement.addEventListener("loadedmetadata", function () {
duration = parseInt(audioElement.duration);
this.time=duration
});
},

        但是发现问题很多，报错说无法对URL使用creatObjectURl，捣鼓了半天发现我这样的想法根本就行不通，就打算还是用手动上传做吧，这时候时长可以获取到了，但是响应式的数据还是设置不了，可能是监听器里用不了？最后还是设置了个hidden的input，通过document.getElementById的方式设置数据，最后提交的时候再从input里取出来

<el-upload action="api/uploadVideo" :data="{ classTopic: classTopic, className: this.class.className }"
:on-change="logTime" ref="video" :auto-upload="false">
<el-button type="primary">更改视频</el-button>
</el-upload>
logTime(file) {
var url = URL.createObjectURL(file.raw);
var audioElement = new Audio(url);
var duration;
audioElement.addEventListener("loadedmetadata", function () {
duration = parseInt(audioElement.duration);
document.getElementById('time').value = duration;
});
},

最后

以上就是温暖万宝路为你收集整理的vue3用elementui上传组件上传视频时携带视频长度信息的全部内容，希望文章能够帮你解决vue3用elementui上传组件上传视频时携带视频长度信息所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。