常见 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 等对象构成的,将会被放进 Bloboptions
: 可选的 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属性为需要下载的文件名称