mime介绍

React
组件

MIME 全称 Multipurpose Internet Mail Extensions（多用途互联网邮件扩展），最早是为电子邮件定义的内容类型标准，现在被广泛用于 HTTP、文件上传、Web API 等领域，用于标识文件或数据的类型。

它回答的问题是：“这段数据是什么类型？”，例如：

• 浏览器拿到一个文件时，用 MIME 类型决定如何处理
• 后端返回数据时，用 MIME 类型告诉前端这是什么格式

1. MIME 的结构

MIME 类型通常由 主类型（type）/子类型（subtype） 组成，例如：

type/subtype

常见主类型：

主类型	说明
text	文本类型（text/plain、text/html）
image	图片类型（image/png、image/jpeg）
audio	音频类型（audio/mpeg、audio/ogg）
video	视频类型（video/mp4、video/webm）
application	通用二进制数据或文档（application/json、application/pdf）
multipart	多部分数据（主要用于表单上传或邮件附件）

2. 常见 MIME 类型示例

文件类型	MIME 类型
.txt	text/plain
.html / .htm	text/html
.json	application/json
.js	text/javascript（或 application/javascript）
.css	text/css
.png	image/png
.jpg / .jpeg	image/jpeg
.gif	image/gif
.pdf	application/pdf
.zip	application/zip
.mp3	audio/mpeg
.mp4	video/mp4
表单文件上传	multipart/form-data

3. MIME 在 HTTP 中的应用

1) 响应头 Content-Type

服务器告诉浏览器返回内容的类型：

HTTP/1.1 200 OK
Content-Type: application/json

{ "name": "Wei", "age": 18 }

浏览器看到 application/json，就会按 JSON 解析。

2) 请求头 Content-Type

客户端告诉服务器发送的数据格式：

POST /upload HTTP/1.1
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary

------WebKitFormBoundary
Content-Disposition: form-data; name="file"; filename="image.png"
Content-Type: image/png

4. MIME 在前端/Node.js 的使用

1) 前端：根据文件获取 MIME

const fileInput = document.querySelector('input[type=file]');
fileInput.onchange = () => {
  const file = fileInput.files[0];
  console.log(file.type); // 例如 "image/png"
}

2) Node.js：通过 mime 包获取 MIME 类型

npm install mime

import mime from 'mime';

console.log(mime.getType('file.json')); // application/json
console.log(mime.getType('image.png')); // image/png

5. 总结

1. MIME 是数据类型标识符，格式为 type/subtype

2. 核心用途：

   • 邮件传输（原始用途）
   • HTTP Content-Type 头（现代常用）
   • 文件上传、下载和浏览器解析
3. 主类型 + 子类型 的组合定义了具体文件类型