常见的 MIME 文件类型_mime类型-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_50339217/article/details/138706661

常见 MIME 类型列表官网链接:
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types

1. MIME 文件类型 API

类型	描述
`文件/档类`	—
text/plain	纯文本文档 (`不含二进制数据, 能有效避免XSS漏洞`)
text/html	html 文档
text/css	css 文件
text/javascript	js 文件
text/xml	RFC 7303 忽略xml头所指定编码格式而默认采用 us-ascii 编码
application/xml	会根据 xml 头指定的编码格式来编码
application/json	JSON 文件
application/pdf	PDF 文件
application/vnd.ms-excel	XLS 文件
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet	XLXS 文件
application/zip	ZIP 文件
application/xml	XML 文件
application/msword	Word 文件
application/vnd.ms-powerpoint	PPT 文件
application/vnd.openxmlformats-officedocument.presentationml.presentation	PPTX 文件
application/rtf	富文本
application/vnd.apple.installer+xml	Apple 安装包
application/vnd.oasis.opendocument.spreadsheet	开放文档表格文档
application/vnd.oasis.opendocument.text	开放文档文本文档
`图像类`	—
image/png	PNG 图像
image/jpeg	JPEG 图像
image/jpg	JPG 图像
image/gif	GIF 图像
image/svg+xml	SVG 图像
image/vnd.microsoft.icon	icon 图像
`影音类`	—
audio/mpeg	MP3 文件
video/mpeg	MP4 文件
audio/ogg	OGG 音频
video/ogg	OGG 视频
`其他类`	—
application/octet-stream	二进制数据流, 表示未知的文件类型 `详见 1.1. application/octet-stream 详解`

1.1. application/octet-stream 详解

application/octet-stream 是一个二进制流文件, 当 content-type 设置为: application/octet-stream 时，浏览器会直接下载。这个类型一般搭配另一个响应头 Content-Disposition,该响应头表示回复的内容以哪种形式展示，内链?（即网页或者网页的一部分），附件?

// octet-stream 详解

const response = await request({
      url:'接口',
      data: { url: '/xxx/2024/5/8/文件名20240508181430117-1条-1.xlsx'},
      method: 'post',
      responseType: 'blob',
      timeout: 1000 * 60 * 10, // 十分钟
    })
// 接口返回的类型  Blob {size: 3956, type: 'text/xml'}
    
const url = window.URL.createObjectURL(new Blob([response], { type: 'application/octet-stream' }))
var link = document.createElement('a')
link.href = url
// const names = `文件名.xlsx`
// link.setAttribute('download', names)
// document.body.appendChild(link)
link.click()
// document.body.removeChild(link)
// window.URL.revokeObjectURL(url)

2. 页面使用代码

// 定义映射对象
const MIME_MAP = {
 txt: "text/plain",
 html: "text/html",
 xml: "text/xml",
 css: "text/css",
 js: "text/javascript",
 zip: "application/zip",
 msword: "application/msword",
 xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
 xls: "application/vnd.ms-excel",
 json: "application/json",
 pdf: "application/pdf",
 png: "image/png",
 jpg: "image/jpg",
 jpeg: "image/jpeg",
 gif: "image/gif",
 svg: "image/svg+xml"
 mp3: "audio/mpeg",
 mp4: "video/mpeg",
 all: "application/octet-stream"
}

// 使用:
let link = document.createElement('a')
link.href = URL.createObjectURL(new Blob([blob], { type: MIME_MAP[fileType] }))
link.click()
URL.revokeObjectURL(link.href) //释放

1.2. decodeURIComponent ( uri )

1. decodeURIComponent 是什么?
decodeURIComponent() 可对 encodeURIComponent() 函数编码的URI进行解码, 它可以将字符串中的特殊字符进行编码的内置函数，以便这些字符能够在 URL中传递或嵌入到 HTML 文档中。它不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码，但会对其他字符，如用于分隔 URI 组件的标点符号，由一个或多个十六进制的转义序列替换。因此，decodeURIComponent() 函数可以恢复这些被编码的特殊字符，使其能够被正确解析和处理。

2. 与 encodeURI() 区别?
encodeURI() 不会对本身属于URI的特殊字符进行编码, 如冒号、正斜杠、问号和井字号,
encodeURICompoent() 会对所有非标准字符进行编码

3. 应用场景
常用于对接口返回的 url 的编码进行解码

4. 数据格式
var file=“/tms/2024/5/8/测试文件20240508181430117-1条-1.xlsx”;
var url =encodeURIComponent(file)
// 打印结果如下:

%2Ftms%2F2024%2F5%2F8%2F%E5%B9%B2%E7%BA%BF%E9%87%8C%E7%A8%8B%E5%B7%AE%E8%A1%A5%E8%B4%B420240508181430117-1%E6%9D%A1-1.xlsx
/tms/2024/5/8/测试文件20240508181430117-1条-1.xlsx

1.3. URL.createObjectURL( array, options )

array：由 ArrayBuffer、ArrayBufferView、Blob、DOMString 等对象构成的，将会被放进 Blob
options : 可选的 BlobPropertyBag 字典，它可能会指定如下两个属性:
type：默认值为 " "，表示将会被放入到 blob 中的数组内容的 MIME 类型。
endings：默认值为"transparent"，用于指定包含行结束符\n的字符串如何被写入，不常用。

1. URL.createObjectURL 是什么?
创建一个指向传入参数对象（如 File 对象或 Blob 对象）的 URL。它可以将Blob、File等二进制文件转换为浏览器可以直接显示的URL地址，从而方便进行展示、下载等操作

2. 应用场景
常用于在网页中显示图片、视频、音频等多媒体文件，或者用于文件下载

3. 数据格式
const url = window.URL.createObjectURL(new Blob([response], { type: ‘application/octet-stream’ }))
// 打印结果如下:
blob:http://localhost:9529/8b1234a4-abcd-4a73-9241-d8fb7be303ce

4. 缺点
1.兼容性问题: IE浏览器不支持createObjectURL方法，需要手动实现下载功能
var xhr = new XMLHttpRequest();
xhr.open(‘GET’, url, true);
xhr.responseType = ‘blob’;
xhr.onload = function() {
if (this.status === 200) {
var blob = new Blob([this.response], { type: ‘image/png’ });
if (window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveOrOpenBlob(blob, ‘file.png’);
} else {
var url = window.URL.createObjectURL(blob);
window.location.href = url;
}
}
};
xhr.send()
2.需要手动释放 createObjectURL, 不然会导致内存泄漏和性能问题,手动释放: URL.revokeObjectURL(url)
3. 内存限制: 将大文件转换为URL地址可能会导致内存问题。所以尽量使用流或者分片等方式

在这里插入图片描述

1.4. Blob()

1. 什么是 Blob ?
Blob（二进制大对象）是几乎所有二进制数据的一种抽象，类似于File对象。它是一种二进制数据

2. 应用场景
可以用来存储图片、音频、视频等多媒体文件

3. 数据格式
const blob = new Blob([‘Hello, World!’], { type: ‘text/plain’ });
这里我们创建一个包含了"Hello, World!"的文本类型的Blob对象，这个对象可以转换为URL地址供我们使用。

使用Blob下载或展示文件


// 1. 展示图片
<img src="blob:{url}">

const blob = new Blob([arrayBuffer], { type: 'image/png' });
const url = URL.createObjectURL(blob);
// 上述代码中，我们将一个二进制的图片文件放入Blob对象中，并使用createObjectURL方法将其转换为URL地址。然后我们在HTML代码中使用img标签展示图片。此时，img的src属性为"blob:{url}"。


// 2. 下载文件
<a href="blob:{url}" download="filename.txt">Download File</a>

const blob = new Blob(['Hello, World!'], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
上述代码中，我们将一个包含"Hello, World!"文本字符串的Blob对象转换为URL地址，并使用a标签展示。a标签的href属性为"blob:{url}"，download属性为需要下载的文件名称

1.5. base64

1. base64 是什么？
Base64 是一种将二进制数据转换为文本数据的编码方式。Base64编码将二进制数据每6位一组进行编码，每组编码后得到一个字符，最终将所有编码后的字符拼接起来形成一个字符串。Base64编码后的字符串中只包含文本字符，可以安全地传输和存储。Base64适用于网络传输需要传输二进制数据的场景

1. 应用场景
常用于处理文本数据，表示传输、存储一些二进制数据，包括MIME的电子邮件及XML的一些复杂数据

1. 使用：
将下面的文字转换成 base64 ,（1）使用外部工具验证，（2）代码实现
（1）转译 base64 工具

（2）代码实现：详见1.5.1

1.5.1. 代码实现 base64 转译

// 1. js
exportFile('base64')({
      url:fileUrl, //文件url, 如: 测试文件.xlsx
      fileName, //文件名, 如: 测试文件
      fileType: "xlsx", // 文件类型, 如: xlsx
  })



// 2. utils

/**
 * 
 * @param {导出函数类型} type 
 * @returns 
 */
 export const exportFile = (type = "href") => {
  switch (type) {
    case "base64": // base64 导出
      return base64Export
    default: // 普通导出
      return hrefExport
  }
}

/**普通导出 */
const hrefExport = (options) => {
  const { url } = options
  window.location.href = settings.moudelUrl + url // settings.moudelUrl 全局配置的环境
}

const MIME_MAP = {
  zip: "application/zip",
  xml: "text/xml",
  xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
  xls: "application/vnd.ms-excel",
  txt: "text/plain",
  pdf: "application/pdf",
  png: "image/png",
  mp3: "audio/mpeg",
  json: "application/json",
  js: "text/javascript",
  jpg: "image/jpeg",
  jpeg: "image/jpeg",
  html: "text/html",
  gif: "image/gif",
}

// base64 转 bolb url 导出
 const base64Export = async (options) => {
 
 // url: 文件url ( 环境路径/测试文件.xlsx ), 环境路径: 下载的文件,首先需要上传到服务器中, 拼接后调接口下载
 // fileType: 文件类型(jpg,svg,png,xlsx...) 参考 MIME_MAP  
 // fileName: 文件名
  const { url, fileType, fileName } = options
  
  // 1. 内网无法访问阿里云服务器下载, 通过接口, 获取文件url ( 二进制字节串/二进制字符串 )
  // 如: UEsDBAoAAAAAAGNJHzMAAAAAAAAAAAAAAAAJAAAAyO28/rmyz+0vUEsDBBQAAAAIALZ9HjPyoUd36gAA....省略
  const res = await ossDownload({
    templateFilePath: url
  })

// 2. 通过 blob 将 二进制字符串  转 二进制数据流
// blob 打印结果: { size: 9992 ,type: "application/vnd.ms-excel" }
  const blob = base64ToBlob(res?.data, MIME_MAP[fileType])

  let link = document.createElement('a')
   // link.href 打印结果 : blob:http://localhost:1234/e86dc9e0-5803-1002-ae76-d4999c4c9f9d
  link.href = URL.createObjectURL(blob) // 详见下方 1.3
  link.download = fileName

  document.body.appendChild(link)
  link.click()
  URL.revokeObjectURL(link.href) 
}


/**
 * base64 转 blob类型
 * @param {base字符串} base64Str 
 * @returns Bolb
 */
 const base64ToBlob = (base64Str,type) => {
  let buffer = Buffer.from(base64Str,'base64')
  
  console.log(buffer,'buffer');
  // Uint8Array(9992) [80,75,3,4,10,0,0,0....]
  
  console.log(new Blob([buffer],{ type: type }),'Blob');
  // { size: 9992 ,type: "application/vnd.ms-excel" }

  return new Blob([buffer],{ type: type })
}