input type="file" 文件上传类型筛选（浏览器兼容）& 获取文件类型浏览器兼容 ——之音频文件上传

笔者之前在开发项目中有个需求：上传音频文件，给用户做好文件类型筛选（限制.mp3，.ogg格式的音频文件以及大小在2M内）

不兼容代码：文件大小限制在此就不详细赘述了，我们用的是vue做的管理后台，用的框架是element-ui，当我写好这么一段话之后就以为完事了

<el-upload
  class="upload-audit"
  accept="audio/mpeg,audio/ogg"
  :action="uploadPath"
  :show-file-list="false"
  :on-success="musicUpload"
  :auto-upload="true"
  :before-upload="beforeadMusicUpload"
>

等价于 ==》 <input accept="audio/mpeg,audio/ogg" οnchange='uploadAudio' />

beforeadMusicUpload(file) {
  const islimitFormate = file.type == 'audio/mp3' || file.type == 'audio/ogg';
  const isLt2M = file.size / 1024 / 1024 < 2;

  if (!islimitFormate) {
    this.$message.error('音乐格式只支持mp3,ogg格式!');
    return false;
  }
  if (!isLt2M) {
    this.$message.error('音乐大小不能超过2MB!');
    return false;
  }
},

测试人员在用谷歌，360，qq浏览器测试的时候都没问题(国内浏览器大多都是双内核)，当用火狐测试的时候出事了，文件传不上去，一直提示：“音乐格式只支持mp3,ogg格式!”，而且用户点击上传按钮后弹框文件夹里只有“.mp3格式的文件”，这下懵逼了，一样的代码火狐为啥这么特殊！！

好了，言归正传，至于各大浏览器的差异我们在此不做讨论，直接上代码，兼容性代码如下：

<el-upload
  class="upload-audit"
  accept="audio/mpeg,audio/ogg,application/ogg"
  :action="uploadPath"
  :show-file-list="false"
  :on-success="musicUpload"
  :auto-upload="true"
  :before-upload="beforeadMusicUpload"
>

等价于 ==》 <input   accept="audio/mpeg,audio/ogg,application/ogg" οnchange='uploadAudio' />

beforeadMusicUpload(file) {
  const islimitFormate = file.type == 'audio/mp3' || file.type == 'audio/ogg' || file.type == "audio/mpeg" || file.type == "video/ogg";
  const isLt2M = file.size / 1024 / 1024 < 2;

  if (!islimitFormate) {
    this.$message.error('音乐格式只支持mp3,ogg格式!');
    return false;
  }
  if (!isLt2M) {
    this.$message.error('音乐大小不能超过2MB!');
    return false;
  }
}

 

其实也就两处不同

1:accept="audio/mpeg,audio/ogg,application/ogg" 中兼容火狐的application/ogg；

2：file.type == 'audio/mp3' || file.type == 'audio/ogg' || file.type == "audio/mpeg"  || file.type == "video/ogg"; 中兼容火狐识别的file.type == "audio/mpeg"  || file.type == "video/ogg"；

下面是各种常见文件格式类型：

*.3gpp  audio/3gpp， video/3gpp  3GPP Audio/Video

*.ac3   audio/ac3   AC3 Audio

*.asf   allpication/vnd.ms-asf  Advanced Streaming Format

*.au    audio/basic AU Audio

*.css   text/css    Cascading Style Sheets

*.csv   text/csv    Comma Separated Values

*.doc   application/msword  MS Word Document

*.dot   application/msword  MS Word Template

*.dtd   application/xml-dtd Document Type Definition

*.dwg   image/vnd.dwg   AutoCAD Drawing Database

*.dxf   image/vnd.dxf   AutoCAD Drawing Interchange Format

*.gif   image/gif   Graphic Interchange Format

*.htm   text/html   HyperText Markup Language

*.html  text/html   HyperText Markup Language

*.jp2   image/jp2   JPEG-2000

*.jpe   image/jpeg  JPEG

*.jpeg  image/jpeg  JPEG

*.jpg   image/jpeg  JPEG

*.js    text/javascript， application/javascript JavaScript

*.json  application/json    JavaScript Object Notation

*.mp2   audio/mpeg， video/mpeg  MPEG Audio/Video Stream， Layer II

*.mp3   audio/mpeg  MPEG Audio Stream， Layer III

*.mp4   audio/mp4， video/mp4    MPEG-4 Audio/Video

*.mpeg  video/mpeg  MPEG Video Stream， Layer II

*.mpg   video/mpeg  MPEG Video Stream， Layer II

*.mpp   application/vnd.ms-project  MS Project Project

*.ogg   application/ogg， audio/ogg  Ogg Vorbis

*.pdf   application/pdf Portable Document Format

*.png   image/png   Portable Network Graphics

*.pot   application/vnd.ms-powerpoint   MS PowerPoint Template

*.pps   application/vnd.ms-powerpoint   MS PowerPoint Slideshow

*.ppt   application/vnd.ms-powerpoint   MS PowerPoint Presentation

*.rtf   application/rtf， text/rtf   Rich Text Format

*.svf   image/vnd.svf   Simple Vector Format

*.tif   image/tiff  Tagged Image Format File

*.tiff  image/tiff  Tagged Image Format File

*.txt   text/plain  Plain Text

*.wdb   application/vnd.ms-works    MS Works Database

*.wps   application/vnd.ms-works    Works Text Document

*.xhtml application/xhtml+xml   Extensible HyperText Markup Language

*.xlc   application/vnd.ms-excel    MS Excel Chart

*.xlm   application/vnd.ms-excel    MS Excel Macro

*.xls   application/vnd.ms-excel    MS Excel Spreadsheet

*.xlt   application/vnd.ms-excel    MS Excel Template

*.xlw   application/vnd.ms-excel    MS Excel Workspace

*.xml   text/xml， application/xml   Extensible Markup Language

*.zip   aplication/zip  Compressed Archive