PrimeNg FileUpload指定.bin文件类型在移动端失效求助

安卓移动端浏览器对HTML5文件上传的accept属性支持存在兼容性问题，不管是用PrimeNG的<p-fileUpload accept=".bin"></p-fileUpload>还是原生<input type="file" accept=".bin" />，都可能出现只能选择图片、视频等预设类型，无法选中.bin文件的情况。以下是几个可行的解决办法：

• 去掉accept属性，前后端配合校验
  直接不设置accept，让用户能选择任意文件，再通过前后端校验确保是.bin格式：

  • 前端校验示例（原生input）：

    const fileInput = document.querySelector('input[type="file"]');
    fileInput.addEventListener('change', (e) => {
      const selectedFile = e.target.files[0];
      if (selectedFile && !selectedFile.name.endsWith('.bin')) {
        alert('请选择.bin格式的文件');
        fileInput.value = ''; // 清空错误选择
      }
    });
    

  • PrimeNG组件校验示例（借助onSelect事件）：

    onFileSelect(event) {
      const invalidFiles = event.files.filter(file => !file.name.endsWith('.bin'));
      if (invalidFiles.length > 0) {
        alert('请选择.bin格式的文件');
        this.fileUpload.clear(); // 清除已选的无效文件
      }
    }
    

  这种方法兼容性拉满，所有移动端浏览器都能正常选文件，唯一的小缺点是需要用户配合，选错了要提示重新选。

• 给accept属性补充通用MIME类型
  .bin属于二进制文件，对应的通用MIME类型是application/octet-stream，可以把accept属性改成同时包含后缀和MIME类型：

  <!-- 原生input写法 -->
  <input type="file" accept=".bin, application/octet-stream" />
  
  <!-- PrimeNG组件写法 -->
  <p-fileUpload accept=".bin, application/octet-stream"></p-fileUpload>
  

  部分安卓浏览器会因为识别到通用二进制类型，放开文件选择的限制，但这个方法不是100%生效，属于折中尝试方案。

• 引导用户切换到系统文件管理器选择
  不少移动端浏览器的默认文件选择弹窗会自动过滤类型，此时可以在上传组件旁边加个提示：* 若找不到.bin文件，请切换到系统文件管理器选项进行选择。用户进入系统文件管理器后，就能直接找到并选中.bin文件了。

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