input file 上传文件，控制其大小格式

需求

上传视频文件：
1、支持点击上传与拖拽上传；
2、只支持固定格式（eg:mp4,avi,mkv等等）的文件上传，最多不超过3G，否则给出提示。

思路

1、input:file 的accept属性
点击上传可以用input:file 的accept属性，限制可以选择的文件MIME类型(常用的MIME类型见下表)。

2、js控制
但是拖拽的时候就没办法满足需求，所以同时使用js控制 —— 在change事件中做限制。
获取到文件信息后判断是否符合要求，不符合则return 中止上传。

代码

html代码

     <input
                  type="file"
                  accept="video/wmv, video/avi, video/mp4, video/flv, video/3gp, video/mov, video/mkv, video/vob"
                  @change="fileChange"
                />

js代码：

   fileChange(e) {
      let file = e.target.files[0]
      if (file) {
        const fileSize = file.size
        const isLt3G = fileSize / 1024 / 1024 / 1024 < 3
        if (!isLt3G) {
          this.$message({
            message: '上传文件大小不超过3G',
            type: 'error'
          })
          file = ''
          return
        }
        const name = file.name
        const fileName = name.substring(name.lastIndexOf('.') + 1).toLowerCase()
        if (
          fileName !== 'wmv' &&
          fileName !== 'avi' &&
          fileName !== 'mp4' &&
          fileName !== 'flv' &&
          fileName !== '3gp' &&
          fileName !== 'mov' &&
          fileName !== 'mkv' &&
          fileName !== 'vob'
        ) {
          this.$message({
            message:
              '请选择格式文件(wmv、avi、mp4、flv、3gp、mov、mkv、vob)上传！',
            type: 'error'
          })
          file = ''
          return
        }
      }
    },

常用MIME类型

后缀名       MIME名称
*.3gpp    audio/3gpp, video/3gpp
*.ac3    audio/ac3
*.asf       allpication/vnd.ms-asf
*.au           audio/basic
*.css           text/css
*.csv           text/csv
*.doc    application/msword    
*.dot    application/msword    
*.dtd    application/xml-dtd    
*.dwg    image/vnd.dwg    
*.dxf      image/vnd.dxf
*.gif            image/gif    
*.htm    text/html    
*.html    text/html    
*.jp2            image/jp2    
*.jpe       image/jpeg
*.jpeg    image/jpeg
*.jpg          image/jpeg    
*.js       text/javascript, application/javascript    
*.json    application/json    
*.mp2    audio/mpeg, video/mpeg    
*.mp3    audio/mpeg    
*.mp4    audio/mp4, video/mp4    
*.mpeg    video/mpeg    
*.mpg    video/mpeg    
*.mpp    application/vnd.ms-project    
*.ogg    application/ogg, audio/ogg    
*.pdf    application/pdf    
*.png    image/png    
*.pot    application/vnd.ms-powerpoint    
*.pps    application/vnd.ms-powerpoint    
*.ppt    application/vnd.ms-powerpoint    
*.rtf            application/rtf, text/rtf    
*.svf           image/vnd.svf    
*.tif         image/tiff    
*.tiff       image/tiff    
*.txt           text/plain    
*.wdb    application/vnd.ms-works    
*.wps    application/vnd.ms-works    
*.xhtml    application/xhtml+xml    
*.xlc      application/vnd.ms-excel    
*.xlm    application/vnd.ms-excel    
*.xls           application/vnd.ms-excel    
*.xlt      application/vnd.ms-excel    
*.xlw      application/vnd.ms-excel    
*.xml    text/xml, application/xml    
*.zip            aplication/zip    
*.xlsx     application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

参考：HTML5的 input:file上传类型控制

input file 文件上传,js控制上传文件的大小和格式

常用文件的mime和mimetype的对应关系

https://www.hangge.com/blog/cache/detail_1796.html

https://blog.csdn.net/u013379933/article/details/77119796