笔者之前在开发项目中有个需求：上传音频文件，给用户做好文件类型筛选（限制.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