直接用 <input type="file"> 上传音频需注意跨平台兼容性：accept 应设为 audio/mpeg,audio/wav,audio/ogg,audio/mp4（非 audio/mp3），FormData 键名须与后端接收字段严格一致，iOS 要求用户手势触发且禁止隐藏 input，MediaRecorder 录音需转为 File 实例，服务端必须校验文件头。
直接用 <input type="file"> 就能上传音频，但 iOS、Android 和桌面浏览器在文件选择范围、MIME 类型识别、自动触发上传上行为不一致——多数失败不是代码写错，而是没处理好 accept 约束、权限提示或 FormData 的键名匹配。
audio/* 和具体 MIME 类型怎么选
用 accept="audio/*" 最省事，但会允许用户选 .aac、.flac 甚至 .m4a（部分安卓 WebView 不支持解码）；更稳妥的是显式列出常用类型：accept="audio/mpeg,audio/wav,audio/ogg,audio/mp4"。注意：Safari 对 audio/mp4 支持不稳定，优先保 audio/mpeg（即 MP3）和 audio/wav。
常见坑：
-
accept="audio/mp3"是错的——MP3 正确 MIME 是audio/mpeg - Chrome 会忽略大小写，但某些安卓 WebView 要求严格匹配，比如
audio/WAV不生效 - 即使加了
accept，用户仍可通过“所有文件”绕过，服务端必须二次校验文件头（magic bytes）
FormData.append() 的 name 必须和服务端接收字段一致
前端 formData.append('audio_file', file)，后端就必须用 $_FILES['audio_file']（PHP）、req.files.audio_file（Express + multer）或对应 key 读取。名字不匹配会导致服务端收不到文件，只看到空对象。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 先用浏览器 Network 面板确认请求体里 multipart 的字段名是否正确（看 Form Data 分栏）
- 避免用中文或空格命名字段，如
formData.append('音频文件', file)容易出编码问题 - 如果后端要求多个同名字段（如批量上传），用
append('audios', file1)、append('audios', file2)，后端按数组收
iOS H5 上传音频常卡在“选择文件”之后
iOS Safari 对 <input type="file"> 的调用有两层限制：一是必须由用户手势触发（不能 onload 自动 click），二是录音文件（如 MediaRecorder 生成的 Blob）需转成 File 实例才能被识别为可上传项。
关键步骤：
- 确保
<input>没有display: none或 opacity: 0 —— iOS 会拒绝隐藏控件的调用 - 若用
MediaRecorder录音，导出 Blob 后要手动构造 File：new File([blob], 'recording.mp3', {type: 'audio/mpeg'}) - 不要依赖
click()模拟点击，改用 visible button 绑定input.click()，且该 button 不能是position: absolute脱离文档流
最易被忽略的一点：iOS 上通过文件管理器选中的音频，有时 MIME 类型会被误报为 application/octet-stream，靠 file.type 判断格式不可靠，得读取文件前几个字节做 sniffing，或者直接传给后端由它校验。上传逻辑本身很简单，麻烦都在边界条件里。
