如何从字符串文件路径获取.ogg文件的二进制内容（Vue场景）

首先要明确：浏览器出于安全限制，不允许直接通过本地文件路径字符串读取文件内容，必须通过<input type="file">获取用户选中的File对象来操作。下面是具体实现步骤：

1. 模板部分（Vue组件） #

添加文件选择输入框，限制仅能选择.ogg文件，并绑定change事件：

<template>
  <div>
    <input 
      type="file" 
      accept=".ogg" 
      @change="handleFileSelect"
    >
  </div>
</template>

2. 脚本部分（两种实现方式） #

方式一：使用现代的Blob.arrayBuffer()（推荐） #

File对象是Blob的子类，可以直接调用arrayBuffer()方法异步获取二进制数据：

<script setup>
const handleFileSelect = async (event) => {
  // 获取选中的第一个文件
  const file = event.target.files[0];
  if (!file) return;

  // 验证文件类型
  if (!file.type.includes('audio/ogg')) {
    alert('请选择.ogg格式的音频文件');
    return;
  }

  try {
    // 获取二进制ArrayBuffer
    const arrayBuffer = await file.arrayBuffer();
    // 可根据需求转换为Uint8Array等格式
    const uint8Array = new Uint8Array(arrayBuffer);
    console.log('文件二进制内容：', uint8Array);
  } catch (err) {
    console.error('读取文件失败：', err);
  }
};
</script>

方式二：使用传统的FileReader #

如果需要兼容旧版浏览器，可以用FileReader API：

<script setup>
const handleFileSelect = (event) => {
  const file = event.target.files[0];
  if (!file) return;

  if (!file.type.includes('audio/ogg')) {
    alert('请选择.ogg格式的音频文件');
    return;
  }

  const reader = new FileReader();
  reader.onload = (e) => {
    // e.target.result为ArrayBuffer类型的二进制数据
    const arrayBuffer = e.target.result;
    const uint8Array = new Uint8Array(arrayBuffer);
    console.log('文件二进制内容：', uint8Array);
  };
  reader.onerror = (err) => {
    console.error('读取文件失败：', err);
  };
  // 以ArrayBuffer格式读取文件
  reader.readAsArrayBuffer(file);
};
</script>

关键说明 #

• accept=".ogg"只是前端层面的限制，用户仍可手动选择绕过，所以必须在代码中再次验证file.type（或文件名后缀）
• 拿到的ArrayBuffer是原始二进制数据，可根据需求转换为Uint8Array、DataView等格式进行操作

内容的提问来源于stack exchange，提问作者mastmartelli