upload的文件对应的类型（比如.pdf 后缀文件对应type为‘application/pdf‘）

CynthiaMyh

已于 2023-07-21 14:02:56 修改

阅读量1.8k

点赞数 9

文章标签：前端

于 2023-05-24 17:12:38 首次发布

本文链接：https://blog.csdn.net/CynthiaMyh/article/details/130851183

版权

创建了一个JavaScript文件，定义了常量ACCEPT_FILE_TYPE_MAP，包含常见文件扩展名与其对应的MIME类型。此外，还提供了一个函数handleAcceptFileType，用于根据accept参数过滤出匹配的MIME类型数组。该函数适用于文件上传场景中对文件类型的限制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

整理成了一个常量，方便需要的时候引用～

新建一个js文件，内容为：

// 常见格式的MIME TYPE对照表
const ACCEPT_FILE_TYPE_MAP = {
  '.3gp': 'video/3gpp',
  '.apk': 'application/vnd.android.package-archive',
  '.asf': 'video/x-ms-asf',
  '.avi': 'video/x-msvideo',
  '.bin': 'application/octet-stream',
  '.bmp': 'image/bmp',
  '.c': 'text/plain',
  '.class': 'application/octet-stream',
  '.conf': 'text/plain',
  '.cpp': 'text/plain',
  '.doc': 'application/msword',
  '.docx': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
  '.xls': 'application/vnd.ms-excel',
  '.xlsx': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
  '.exe': 'application/octet-stream',
  '.gif': 'image/gif',
  '.gtar': 'application/x-gtar',
  '.gz': 'application/x-gzip',
  '.h': 'text/plain',
  '.htm': 'text/html',
  '.html': 'text/html',
  '.jar': 'application/java-archive',
  '.java': 'text/plain',
  '.jpeg': 'image/jpeg',
  '.jpg': 'image/jpeg',
  '.js': 'application/x-javascript',
  '.log': 'text/plain',
  '.m3u': 'audio/x-mpegurl',
  '.m4a': 'audio/mp4a-latm',
  '.m4b': 'audio/mp4a-latm',
  '.m4p': 'audio/mp4a-latm',
  '.m4u': 'video/vnd.mpegurl',
  '.m4v': 'video/x-m4v',
  '.mov': 'video/quicktime',
  '.mp2': 'audio/x-mpeg',
  '.mp3': 'audio/x-mpeg',
  '.mp4': 'video/mp4',
  '.mpc': 'application/vnd.mpohun.certificate',
  '.mpe': 'video/mpeg',
  '.mpeg': 'video/mpeg',
  '.mpg': 'video/mpeg',
  '.mpg4': 'video/mp4',
  '.mpga': 'audio/mpeg',
  '.msg': 'application/vnd.ms-outlook',
  '.ogg': 'audio/ogg',
  '.pdf': 'application/pdf',
  '.png': 'image/png',
  '.pps': 'application/vnd.ms-powerpoint',
  '.ppt': 'application/vnd.ms-powerpoint',
  '.pptx': 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
  '.prop': 'text/plain',
  '.rc': 'text/plain',
  '.rar': 'application/x-rar',
  '.rmvb': 'audio/x-pn-realaudio',
  '.rtf': 'application/rtf',
  '.sh': 'text/plain',
  '.svg': 'image/svg+xml',
  '.tar': 'application/x-tar',
  '.tgz': 'application/x-compressed',
  '.txt': 'text/plain',
  '.wav': 'audio/x-wav',
  '.wma': 'audio/x-ms-wma',
  '.wmv': 'audio/x-ms-wmv',
  '.wps': 'application/vnd.ms-works',
  '.xml': 'text/plain',
  '.z': 'application/x-compress',
  '.zip': ['application/x-zip-compressed', 'application/zip']
}

export { ACCEPT_FILE_TYPE_MAP }

是根据【这篇博客】整理的。

------------------------------------------

补充：

后来又发现有的后缀名对应的类型有多种（比如.zip对应 ['application/x-zip-compressed', 'application/zip'] 这2个），就又改了一下筛选出accept对应类型的函数。

比如：限制的accept的值为‘.pdf, .doc, .docx, .xls, .xlsx, .zip, .rar’，

用函数获取到对应的类型数组：

    /**
     * @description 根据accept计算需要限制的文件类型
     */
    handleAcceptFileType() {
      const acceptArray = this.accept.split(',') // 传入的accept
      const acceptFileTypeArray = [] // 传入的accept对应的限制类型
      for (const [accept, type] of Object.entries(this.acceptFileTypeMap)) {
        if (acceptArray.includes(accept)) {
          if (typeof type === 'string') {
            acceptFileTypeArray.push(type)
          } else if (Array.isArray(type) && type.length > 0) {
            type.forEach(item => {
              acceptFileTypeArray.push(item)
            })
          }
        }
      }
      this.acceptFileType = acceptFileTypeArray
    }

最后打印出来得到的结果就是这样的：