mime介绍

半兽人 发表于: 2025-08-05   最后更新时间: 2025-08-05 09:27:49  
{{totalSubscript}} 订阅, 114 游览

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

它回答的问题是:“这段数据是什么类型?”,例如:

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

1. MIME 的结构

MIME 类型通常由 主类型(type)/子类型(subtype) 组成,例如:

type/subtype

常见主类型:

主类型 说明
text 文本类型(text/plaintext/html
image 图片类型(image/pngimage/jpeg
audio 音频类型(audio/mpegaudio/ogg
video 视频类型(video/mp4video/webm
application 通用二进制数据或文档(application/jsonapplication/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. 主类型 + 子类型 的组合定义了具体文件类型
更新于 2025-08-05

查看React更多相关的文章或提一个关于React的问题,也可以与我们一起分享文章