Vue拖拽文件报错：Cannot read properties of undefined (reading 'files') 求助

阿华AIGC实验室

2026-4-27

解决拖放MP3时出现的Uncaught TypeError错误

嘿，我一眼就揪出问题所在啦！你遇到的Uncaught TypeError: Cannot read properties of undefined (reading 'files')错误，核心原因是拼写失误——这可是前端开发里超常见的小坑😅

第一步：修复致命拼写错误

在你的upload方法中，把dataTransfer写成了dataTranfser（少了一个s）！这就导致$event.dataTranfser是undefined，自然没法读取它的files属性。

把这一行：

const files = [ ...$event.dataTranfser.files];

改成：

const files = [ ...$event.dataTransfer.files];

第二步：让代码更健壮的优化建议

为了避免后续出现其他意外问题，给你几个小调整建议：

添加存在性检查，防止空拖放或异常事件报错：

upload($event){
  this.isDragover = false;
  // 先确认事件对象里有可读取的文件
  if (!$event.dataTransfer || !$event.dataTransfer.files.length) {
    console.warn("没有检测到可上传的文件哦");
    return;
  }
  const files = [...$event.dataTransfer.files];
  files.forEach((file) => {
    if(file.type !== 'audio/mpeg'){
      console.warn(`${file.name} 不是MP3文件，已跳过上传`);
      return;
    }
    const storageRef = storage.ref();
    const songsRef = storageRef.child(`songs/${file.name}`);
    // 添加上传状态监听，方便排查问题
    songsRef.put(file)
      .then(snapshot => {
        console.log(`${file.name} 上传成功啦！`);
      })
      .catch(error => {
        console.error(`${file.name} 上传失败：`, error);
      });
  });
}