Bootstrap b-form-file在安卓Firefox、iOS Safari无法接收.wav文件

问题根源 #

不同浏览器对WAV文件的MIME类型识别存在差异：

• 安卓Firefox可能将WAV识别为audio/x-wav而非audio/wav
• iOS Safari在文件选择时会严格过滤accept属性，部分场景下无法正确识别audio/wav，甚至会返回空的file.type

具体修复步骤 #

1. 修正accept属性的写法

将原写法替换为包含所有常见WAV MIME类型的格式，同时保留扩展名后缀，提升跨浏览器兼容性：

<b-form-file
        @change="onFileChange"
        class="formFile"
        accept="audio/wav,audio/x-wav,audio/vnd.wave,.wav"
        v-model="audioWav"
        :state="Boolean(audioWav)"
        placeholder="Wähle eine Audio .wav Datei aus ziehe sie hier rein..."
        drop-placeholder="Lass sie fallen..."
    ></b-form-file>

2. 优化文件校验逻辑

不能仅依赖file.type判断，补充文件扩展名校验，覆盖浏览器返回空类型或错误类型的场景：

onFileChange(event) {
    const file = event.target.files[0];
    if (!file) return;

    // 定义所有合法的WAV MIME类型和扩展名
    const validMimeTypes = ['audio/wav', 'audio/x-wav', 'audio/vnd.wave', ''];
    const validExtensions = ['.wav'];
    
    // 获取文件扩展名并转为小写
    const fileExt = '.' + file.name.split('.').pop().toLowerCase();

    // 双重校验：MIME类型合法 且 扩展名合法
    const isValid = validMimeTypes.includes(file.type) && validExtensions.includes(fileExt);

    if (isValid) {
        this.makeToast("Erfolgreich","Auswählen war erfolgreich!","success",false);
    } else {
        this.makeToast("Falscher Dateityp!","Wähle bitte nur Audiodateien mit der Endung .wav aus.","danger",false);
        event.target.value = null; // 清空错误选择的文件
    }
}

关键说明 #

• 加入audio/x-wav和audio/vnd.wave是为了覆盖安卓Firefox等浏览器的MIME类型识别差异
• 保留空字符串''在validMimeTypes中，适配iOS Safari部分场景下返回空file.type的情况
• 增加扩展名校验作为兜底逻辑，确保即使MIME类型识别错误，也能通过扩展名判断文件合法性

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