伦教网站开发,网站的简单布局,急需一个大专文凭,怎么在手机上自己开发软件一、 Blob 和 File 的区别
Blob 和 File 都是 JavaScript 中用于处理二进制数据的对象#xff0c;但它们有一些区别。 Blob 定义#xff1a; Blob 表示不可变的、原始数据的类文件对象。它通常用于存储大块的二进制数据#xff0c;比如图像、音频或视频文件等。 特点…一、 Blob 和 File 的区别
Blob 和 File 都是 JavaScript 中用于处理二进制数据的对象但它们有一些区别。 Blob 定义 Blob 表示不可变的、原始数据的类文件对象。它通常用于存储大块的二进制数据比如图像、音频或视频文件等。 特点 Blob 对象可以包含任意类型的数据不仅限于文本或二进制数据。它的数据是只读的你不能直接修改 Blob 中的数据。 创建方式 可以通过构造函数 Blob 或 BlobBuilder 来创建 Blob 对象。 // 使用构造函数创建 Blob
var blob new Blob([Hello, World!], { type: text/plain });File 定义 File 是 Blob 的子类通常用于表示用户选择的文件。它包含了文件的元信息如文件名、大小、修改时间等。 特点 除了继承 Blob 的特性外File 还包含文件的相关信息例如文件名 (name)、文件的最后修改时间 (lastModifiedDate)、文件的 MIME 类型 (type) 等。 创建方式 通常通过用户交互选择文件然后通过 File 构造函数创建。 // 通过用户选择创建 File 对象
input typefile idfileInput /
var fileInput document.getElementById(fileInput);
var file fileInput.files[0];总结 Blob 是用于存储任意类型的二进制数据的对象而 File 是 Blob 的一种特殊情况用于表示用户选择的文件并包含了文件的相关信息。 Blob 通常用于一般的二进制数据存储而 File 更适合表示文件对象。 File 是 Blob 的扩展因此 File 具有 Blob 的所有功能并在此基础上添加了文件相关的元信息。
二、 Blob、File、Base64 三种类型的相互转换
File 转 Blob
const blob new Blob([file], { type: file.type });File/Blob 转 Base64
// 创建一个新的 FileReader 对象
const reader new FileReader();
// 读取 File 对象
reader.readAsDataURL(file/blob);
// 加载完成后
reader.onload () {// 将读取的数据转换为 base64 编码的字符串const base64String reader.result.split(,)[1];
}Base64 转 Blob
const base64ToBlob base64 {let arr base64.split(,), // 使用逗号 , 将传入的 base64 字符串分割成一个数组。因为 base64 编码的字符串通常以 data:image/jpeg;base64, 这样的格式开头所以这一步是为了去掉开头的部分。mime arr[0].match(/:(.\*?);/)[1], // 使用正则表达式从分割后的数组的第一个元素中提取 MIME 类型。例如对于 data:image/jpeg;base64,它将提取 image/jpegbstr window.atob(arr[1]), // 使用 atob 方法将 base64 编码的字符串去掉开头的部分后解码为普通的字符串。n bstr.length, // 获取解码后的字符串的长度。u8arr new Uint8Array(n); // 创建一个新的 Uint8Array 对象长度为解码后的字符串的长度。Uint8Array 是一个用于处理无符号 8 位整数的数组类型。while (n--) { // 循环从最后一个字符开始向前遍历解码后的字符串。u8arr[n] bstr.charCodeAt(n); // 将解码后的字符串的每个字符转换为对应的 ASCII 码值然后存储到 u8arr 数组中。}return new Blob([u8arr], { // 创建一个新的 Blob 对象其中包含之前转换的二进制数据。type: mime, // 设置 Blob 对象的 MIME 类型为之前提取的类型。});
};Base64 转 File
const base64ToFile (base64, fileName) {let arr base64.split(,);let mime arr[0].match(/:(.\*?);/)[1];let bstr atob(arr[1]);let n bstr.length;let u8arr new Uint8Array(n);while (n--) {u8arr[n] bstr.charCodeAt(n);}return new File([u8arr], fileName, {type: mime});
};
