blob对象
1.定义
- Blob是
Binary Large Object的缩写，表示二进制大对象。
- MDN上对其的定义是：
Blob对象表示一个不可变、原始数据的类文件对象。可以通俗的说，Blob就是一只读的二进制对象。 - 它并不是前端的所特有对象，而是计算机界的通用术语，在一些数据库中，例如，MYSQL中的BLOB类型就表示二进制数据的容器， 可以用来存储文件、图片、音频、视频、甚至是纯文本等各种类型的数据。
2.用法
Blob主要包含两个属性
Blob.size：只读，对象中所包含数据的大小（字节）Blob.type：只读，一个字符串，表明该Blob对象所包含数据的 MIME 类型。如果类型未知，则该值为空字符串。（MIME类型参考）
创建一个Blob对象，需要调用Blob构造函数。
- array: 一个数组，包含将被放入 Blob 对象中的数据，可以是字符串、数组缓冲区（ArrayBuffer）、TypedArray、Blob 对象等。
- options: 一个可选的对象，可以设置 type（MIME 类型）和 endings（用于表示换行符）。
const blob = new Blob(array, options);
// 创建Blob对象
let blob;
if(type == 'txt') blob = new Blob([text], { type: 'text/plain;charset=utf-8' });
else if(type == 'pdf') blob = new Blob([text], { type: 'application/pdf' });
else if(type == 'docx') blob = new Blob([text], { type: 'application/msword;charset=utf-8;' });
else if(type == 'zip') blob = new Blob([text], { type: 'application/zip;' });
使用示例
const data1 = "a";
const data2 = "b";
const data3 = "<div style='color:red;'>This is a blob</div>";
const data4 = { "name": "abc" };
// 创建blob对象
const blob1 = new Blob([data1]);
const blob2 = new Blob([data1, data2]);
const blob3 = new Blob([data3], {type : 'text/html'});
const blob4 = new Blob([JSON.stringify(data4)]);
const blob5 = new Blob([data4]);
const blob6 = new Blob([data3, data4]);
console.log(blob1); //输出：Blob {size: 1, type: ""}
console.log(blob2); //输出：Blob {size: 2, type: ""}
console.log(blob3); //输出：Blob {size: 44, type: "text/html"}
console.log(blob4); //输出：Blob {size: 14, type: ""}
console.log(blob5); //输出：Blob {size: 15, type: ""}
console.log(blob6); //输出：Blob {size: 59, type: ""}
// 当使用普通对象创建Blob对象时，相当于调用了普通对象的toString()方法得到字符串数据，然后再创建Blob对象。所以，blob5保存的数据是"[object Object]"，是15个字节(不包含最外层的引号)。
3.Blob目前有四个方法
Blob.slice([start[, end[, contentType]]])：返回一个新的 Blob 对象，包含了源 Blob 对象中指定范围内的数据。（由于File继承自Blob，可用此方法分割本地文件，实现分片上传）
Blob.stream()：返回一个能读取blob内容的 ReadableStream。
Blob.text()：返回一个promise且包含blob所有内容的UTF-8格式的 USVString。
Blob.arrayBuffer()：返回一个promise且包含blob所有内容的二进制格式的 ArrayBuffer。
4.blob使用场景
文件下载
export function downloadBlob(blob, filename) {
// 创建URL
const url = URL.createObjectURL(blob);
// 创建a标签
const link = document.createElement('a');
link.style.display = 'none';
link.href = url;
link.setAttribute('download', filename);
document.body.appendChild(link);
// 触发下载
link.click();
// 清理
document.body.removeChild(link);
URL.revokeObjectURL(url);
}
CSV 或 Excel 数据生成
const data = [
["Name", "Age", "City"],
["Alice", "24", "New York"],
["Bob", "30", "San Francisco"],
];
const csvContent = data.map(row => row.join(',')).join('\n');
const blob = new Blob([csvContent], { type: 'text/csv' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = "data.csv";
a.click();
URL.revokeObjectURL(url);
file对象
1.定义
- File即我们通常所说的文件，我们硬盘里存储的音视频、文档等等都是文件。
- MDN定义：文件（
File）接口提供有关文件的信息，并允许网页中的 JavaScript 访问其内容。通常情况下，File对象是来自用户在一个 <input> 元素上选择文件后返回的 FileList 对象,也可以是来自由拖放操作生成的 DataTransfer 对象，或者来自 HTMLCanvasElement 上的mozGetAsFile() API。
- File对象是Blob的子类，File 对象除了具有 Blob 的所有属性和方法之外，它包含了文件的元信息，如文件名、大小、修改时间等。File 对象通常由用户通过
<input type="file">选择文件时创建，也可以使用 JavaScript 构造函数手动创建。
2.File常用的属性
File.name 只读,返回当前File 对象所引用文件的名称。
File.size 只读,返回当前File 对象文件的大小。
File.type 只读,返回文件的多用途互联网邮件扩展类型（MIME Type）
3.用法
构造方法：
new File(array, name, options);
// 创建一个 File 对象
const file = new File(["Hello, File!"], "example.txt", { type: "text/plain", lastModified: Date.now() });
console.log(file);
// File { name: "example.txt", size: 12, type: "text/plain", lastModified: 1695644303000 }
用户上传：
<input type="file" id="fileInput" />
<script>
document.getElementById("fileInput").addEventListener("change", (event) => {
const file = event.target.files[0];
console.log("文件名:", file.name);
console.log("文件类型:", file.type);
console.log("文件大小:", file.size);
});
</script>
base64编码
1.定义
base64编码 是一种基于 64 个可打印字符来表示二进制数据的方法。
base64常用于在通常处理文本数据的场合，表示、传输、存储一些二进制数据，包括MIME的电子邮件及XML的一些复杂数据。
2.ascll码
ASCII码一共规定了128个字符的编码，只占用了一个字节的后面7位，最前面的1位统一规定为0。
在 ASCII 码中 0 - 31和 127 是控制字符，共 33 个。其余 95 个，即 32 - 126 是可打印字符，包括数字、大小写字母、常用符号等。当不可见字符在网络上传输时，比如说从 A 计算机传到 B 计算机，往往要经过多个路由设备，由于不同的设备对字符的处理方式有一些不同，这样那些不可见字符就有可能被处理错误，这是不利于传输的。
为了解决这个问题，我们可以先对数据进行编码，比如 base64 编码，变成可见字符，也就是 ASCII 码可表示的可见字符，从而确保数据可靠传输。Base64 的内容是有 0 ～ 9，a ～ z，A ～ Z，+，/ 组成，正好 64 个字符，这些字符是在 ASCII 可表示的范围内，属于 95 个可见字符的一部分。
3.编码格式
Base64 就是一种基于 64 个可打印字符来表示二进制数据的表示方法。
它的编码过程如下：
- 将待转换的字符串每三个字节分为一组，每个字节占 8 个二进制位，那么共有 24 个二进制位。
- 将第（1）步得到的每 24 个二进制位分为每 6 个一组，则每 3 个字节可分为 4 组。
- 在每组前面添加两个 0 ，每组由 6 个二进制位变为 8 个二进制位，总共 32 个二进制位，即四个字节。
举例：
转换前 10101101 10111010 01110110 转换中 101011 011011 101001 110110 转换后 00101011 00011011 00101001 00110110 对应码表中的值 r b p 2
base64要求把每三个8Bit的字节转换为四个6Bit的字节（3*8 = 4*6 = 24），然后把6Bit再添两位高位0，组成四个8Bit的字节，也就是说，转换后的字符串理论上将要比原来的长1/3。base64把一串二进制转换成另一种二进制串，以至于可以打印成英文、数字字符还有+、/.
4.base64 编码和解码
在 JavaScript 中，有两个函数被分别用来处理解码和编码 base64 字符串：
- btoa()：从字符串创建一个 base64 编码的 ASCII 字符串，其中字符串中的每个字符都被视为一个二进制数据字节。
- atob()：该函数能够解码通过 base64 编码的字符串数据。
unicode
Unicode又称为统一码、万国码、单一码，是国际组织制定的旨在容纳全球所有字符的编码方案，包括字符集、编码方案等，它为每种语言中的每个字符设定了统一且唯一的二进制编码，以满足跨语言、跨平台的要求。
Unicode 字符集
Unicode 为每个字符提供一个唯一数字（码点 code point），记为“U+xxxx”，其中xxxx是码位转换成16进制后的结果。
字符->码位的集合即 Unicode 字符集，也称作通用字符集（英语：Universal Character Set, UCS）。可在这里查询字符对应的码位。
Unicode 编码
Unicode 字符集规定了字符对应的唯一码点，但在实际的传输、存储过程中，为了兼顾各系统平台的差异、节省空间，需要对字符集进行编码——将对应的码点转换成另一种格式，即Unicode转换格式（Unicode Transformation Format，简称 UTF）。
Unicode 编码规则决定了码点如何在文件中显示，我们熟知的UTF-8 UTF-16就是编码规则的不同版本。
utf-8编码
UTF-8就是在互联网上使用最广的一种unicode的实现方式。UTF-8 是一种针对 Unicode 的可变长度字符编码，根据码点的大小，将其编码为 1 到 4 个字节。
简单来说，Unicode 是【字符集】，UTF-8 是字符集的一种【编码规则】。但广义来讲，它们是包含关系，如下图：
+-----------------------------+ | Unicode | | +-----------------------+ | | | 通用字符集(UCS) | | | +-----------------------+ | | +------------------------+ | | | UCS转换格式(UTF) | | | | +-------------------+ | | | | | UTF-8, UTF-16 ... | | | | | +-------------------+ | | | +------------------------+ | | | +-----------------------------+
标签：编码,const,File,Blob,unicode,utf,type,blob From： https://www.cnblogs.com/wq805/p/18683369