先看看bug
可以看到这里我们想把监听函数获取到的 duration push进file这个数组里,结果因为事件监听后执行(先打印出579行file的值,再打印出573行 duration的值),导致file里的duration为undefined
解决办法:
方法一:使用 setTimeout 异步处理
successVideo: function (response, file, fileList) {
this.file = [];
for (let i = 0; i < fileList.length; i++) {
var url = URL.createObjectURL(fileList[i].raw);
var audioElement = new Audio(url);
var duration;
audioElement.addEventListener("loadedmetadata",
function() {
duration =parseInt(audioElement.duration) ; //时长为秒
console.log(duration);
});
}
setTimeout(()=>{
this.file.push({
title:fileList[i].name,urlList:["https://lnp-video.jumutech.cn/" + file.response.key],duration:duration})
},1000)
},
方法二:调用this函数
// 存储到file
pushFile(file, duration) {
console.log(file, duration);
this.file.push({
title: file.name,
urlList: ["https://lnp-video.jumutech.cn/" + file.response.key],
duration: duration,
});
},
// 视频上传成功
successVideo: function (response, file, fileList) {
this.file = [];
for (let i = 0; i < fileList.length; i++) {
var url = URL.createObjectURL(fileList[i].raw);
var audioElement = new Audio(url);
var duration;
audioElement.addEventListener(
"loadedmetadata",
function () {
duration = parseInt(audioElement.duration); //时长为秒,取整
this.pushFile(fileList[i], duration);
})
}
},
解决结果: