实现 MimeLookup 工具

分类：developer ｜ 标签：MIME、Content-Type、查询 扩展名与 MIME 类型互查

2.1 功能说明

扩展名与 MIME 类型互查

2.1.1 使用指南

功能说明

输入文件扩展名（如 json）查询对应 MIME，或输入 MIME（如 image/png）反查扩展名。

使用场景

上传校验、设置 Content-Type、接口联调。

2.2 代码实现

2.2.1 组件结构

本工具是一个基于 Vue 3 <script setup> 语法的单文件组件（SFC），统一包裹在 ToolPageShell 组件内，由它提供页面标题、工具 ID、分类与「使用指南」插槽等通用外壳；核心业务逻辑（响应式状态、计算属性、事件处理函数）全部写在 <script setup> 中，输入/输出通过 el-input、el-button 等 Element Plus 组件与用户交互，所有数据均在浏览器本地处理，不会上传服务器。

2.2.2 核心逻辑概览

<script setup> 中定义的主要函数/方法：

• run()

2.2.3 关键实现代码

以下是该工具的完整 <script setup> 实现（核心代码）。模板（<template>）与样式（<style>）已省略。

import { ref, computed } from 'vue'
import ToolPageShell from '@/components/ToolPageShell.vue'

const MAP = {
  html: 'text/html', htm: 'text/html', css: 'text/css', js: 'text/javascript', mjs: 'text/javascript',
  json: 'application/json', xml: 'application/xml', txt: 'text/plain', csv: 'text/csv', md: 'text/markdown',
  png: 'image/png', jpg: 'image/jpeg', jpeg: 'image/jpeg', gif: 'image/gif', webp: 'image/webp',
  svg: 'image/svg+xml', bmp: 'image/bmp', ico: 'image/x-icon', avif: 'image/avif',
  mp3: 'audio/mpeg', wav: 'audio/wav', ogg: 'audio/ogg', m4a: 'audio/mp4', flac: 'audio/flac',
  mp4: 'video/mp4', webm: 'video/webm', avi: 'video/x-msvideo', mov: 'video/quicktime',
  pdf: 'application/pdf', doc: 'application/msword', docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
  xls: 'application/vnd.ms-excel', xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
  ppt: 'application/vnd.ms-powerpoint', pptx: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
  zip: 'application/zip', rar: 'application/vnd.rar', '7z': 'application/x-7z-compressed', tar: 'application/x-tar', gz: 'application/gzip',
  woff: 'font/woff', woff2: 'font/woff2', ttf: 'font/ttf', otf: 'font/otf',
  eot: 'application/vnd.ms-fontobject', wasm: 'application/wasm', woff: 'font/woff'
}
const q = ref('')
const searched = ref(false)

const rows = computed(() => {
  const s = q.value.trim().toLowerCase()
  if (!s) { searched.value = false; return [] }
  searched.value = true
  const byExt = Object.entries(MAP).filter(([e]) => e.includes(s)).map(([e, m]) => ({ ext: '.' + e, mime: m }))
  if (byExt.length) return byExt
  const byMime = Object.entries(MAP).filter(([, m]) => m.includes(s)).map(([e, m]) => ({ ext: '.' + e, mime: m }))
  return byMime
})

function run() { rows.value }

2.3 效果截图

工具访问地址：https://www.i91tools.com/tools/mime-lookup