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;
            });
        },