业务场景-关于二次包装el-upload,做上传文件类型限制的功能

303 阅读2分钟

前言

el-upload的accept属性,可以接收限制上传文件的类型,官方文档的属性说明里,提示accpet就是input 类型type="file"控件的原生属性,那还是追踪溯源,来看看原生的input都怎么使用的?好吧,start~

关于<input type="file"/>

可以参考这个文档链接

// accept 接口一组逗号分隔的“唯一的文件类型说明符”,例如下方的例子
<input type="file" id="docpicker"
  accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">

关于“唯一的文件类型说明符”,官方也有例子补充,like this,总体来说,可以接收文件扩展名MIME typetype/* (*代表所有这一类文件)

  • A valid case-insensitive filename extension, starting with a period (".") character. For example: .jpg.pdf, or .doc.
  • A valid MIME type string, with no extensions.
  • The string audio/* meaning "any audio file".
  • The string video/* meaning "any video file".
  • The string image/* meaning "any image file".

关于MIME type

MIME type是媒体资源类型,以下是搜集的一些文件格式和type之间的映射

格式其他补充
*.3gppaudio/3gpp, video/3gpp3GPP Audio/Video
*.ac3audio/ac3AC3 Audio
*.asfallpication/vnd.ms-asfAdvanced Streaming Format
*.auaudio/basicAU Audio
*.csstext/cssCascading Style Sheets
*.csvtext/csvComma Separated Values
*.docapplication/mswordMS Word Document
*.docxapplication/vnd.openxmlformats-officedocument.wordprocessingml.documentMS Word Document
*.dotapplication/mswordMS Word Template
*.dtdapplication/xml-dtdDocument Type Definition
*.dwgimage/vnd.dwgAutoCAD Drawing Database
*.dxfimage/vnd.dxfAutoCAD Drawing Interchange Format
*.gifimage/gifGraphic Interchange Format
*.htmtext/htmlHyperText Markup Language
*.htmltext/htmlHyperText Markup Language
*.jp2image/jp2JPEG-2000
*.jpeimage/jpegJPEG
*.jpegimage/jpegJPEG
*.jpgimage/jpegJPEG
*.jstext/javascript, application/javascriptJavaScript
*.jsonapplication/jsonJavaScript Object Notation
*.mp2audio/mpeg, video/mpegMPEG Audio/Video Stream, Layer II
*.mp3audio/mpegMPEG Audio Stream, Layer III
*.mp4audio/mp4, video/mp4MPEG-4 Audio/Video
*.mpegvideo/mpegMPEG Video Stream, Layer II
*.mpgvideo/mpegMPEG Video Stream, Layer II
*.mppapplication/vnd.ms-projectMS Project Project
*.oggapplication/ogg, audio/oggOgg Vorbis
*.pdfapplication/pdfPortable Document Format
*.pngimage/pngPortable Network Graphics
*.potapplication/vnd.ms-powerpointMS PowerPoint Template
*.ppsapplication/vnd.ms-powerpointMS PowerPoint Slideshow
*.pptapplication/vnd.ms-powerpointMS PowerPoint Presentation
*.rtfapplication/rtf, text/rtfRich Text Format
*.svfimage/vnd.svfSimple Vector Format
*.tifimage/tiffTagged Image Format File
*.tiffimage/tiffTagged Image Format File
*.txttext/plainPlain Text
*.wdbapplication/vnd.ms-worksMS Works Database
*.wpsapplication/vnd.ms-worksWorks Text Document
*.xhtmlapplication/xhtml+xmlExtensible HyperText Markup Language
*.xlcapplication/vnd.ms-excelMS Excel Chart
*.xlmapplication/vnd.ms-excelMS Excel Macro
*.xlsapplication/vnd.ms-excelMS Excel Spreadsheet
*.xlsxapplication/vnd.openxmlformats-officedocument.spreadsheetml.sheetMS Excel Macro
*.xltapplication/vnd.ms-excelMS Excel Template
*.xlwapplication/vnd.ms-excelMS Excel Workspace
*.xmltext/xml, application/xmlExtensible Markup Language
*.zipaplication/zipCompressed Archive

原文链接:blog.csdn.net/qq_42740797…