Vue 同一函数内，将监听函数addEventListener获取到的值 赋值给其他变量，由于函数执行原因，导致赋值为undefined

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

解决结果：