用模板怎么做网站,东莞关键词优化外包,绵阳网站建设费用,wordpress控制概述#xff1a; js处理文件、二进制数据和数据转换的时候#xff0c;提供了一些API和对象#xff0c;例如#xff1a;File、Blob、FileReader、ArraryBuffer、Base64、Object URL 和 DataURL。现在主要介绍File和Blob这两个对象。
1.Blob介绍
在js中#xff0c;Blob js处理文件、二进制数据和数据转换的时候提供了一些API和对象例如File、Blob、FileReader、ArraryBuffer、Base64、Object URL 和 DataURL。现在主要介绍File和Blob这两个对象。
1.Blob介绍
在js中BlobBinary Large Object对象用于表示不可变的原始二进制数据主要用于存储文件、图片、视频和音频等各种类型数据。 Blob提供一种高效方式操作数据文件不需要将数据都加载到内存中有利于处理二进制数据或大型文件。
可以使用 new Blob() 构造函数创建一个 Blob 对象
const blob new Blob(blobParts, options); blobParts: 是一个包含将被放入 Blob 对象中的数据的数组可以是字符串、数组缓冲区ArrayBuffer、TypedArray、Blob 对象等。 options: 一个可选的对象可以设置 typeMIME 类型和 endings用于表示换行符。
例如
const blob new Blob([Hello, world!], { type: text/plain }); Blob 对象主要有以下几个属性 size: 返回 Blob 对象的大小以字节为单位。 type: 返回 Blob 对象的 MIME 类型。 Blob 对象提供了一些常用的方法来操作二进制数据。
例如slice([start], [end], [contentType])、text()、arrayBuffer() 和 stream()。 slice([start], [end], [contentType]) 该方法用于从 Blob 中截取一部分数据并返回一个新的 Blob 对象。 参数 start 和 end 表示提取的字节范围contentType 设置提取部分的 MIME 类型。 const blob new Blob([Hello, world!], { type: text/plain });
const partialBlob_1 blob.slice(0, 5, );
const partialBlob_2 blob.slice(0, 5, text/plain); text() 该方法将 Blob 的内容读取为文本字符串。它返回一个 Promise解析为文本数据。 const blob new Blob([Hello, world!], { type: text/plain });
blob.text().then((text) {console.log(text); // 输出 Hello, world!
}); arrayBuffer() 该方法将 Blob 的内容读取为 ArrayBuffer 对象适合处理二进制数据。 它返回一个 Promise解析为 ArrayBuffer 数据。 const blob new Blob([Hello, world!], { type: text/plain });
blob.arrayBuffer().then((buffer) {console.log(buffer);
}); stream() 该方法将 Blob 的数据作为一个 ReadableStream 返回允许以流的方式处理数据适合处理大文件。
const blob new Blob([Hello, world!], { type: text/plain });
const stream blob.stream(); Blob的应用场景
Blob 对象的应用场景很多尤其是在 前端Web 应用中处理文件、图片或视频等二进制数据时有以下场景。 生成文件下载 通过 Blob 创建文件并生成下载链接供用户下载文件。 const blob new Blob([test文件内容], { type: text/plain });
const url URL.createObjectURL(blob); // 创建一个 Blob URL
const a document.createElement(a);
a.href url;
a.download test.txt;
a.click();
URL.revokeObjectURL(url); // 销毁 URL 对象 运行代码后会在浏览器中下载一个test.txt的文件 上传文件 通过 FormData 对象将 Blob 作为文件上传到服务器 const formData new FormData();
formData.append(file, blob, example.txt); //formData.append(name, blob, fileName)
fetch(/upload, {method: POST,body: formData,
}).then((response) {console.log(文件成功上传了);
});
读取图片或其他文件 通过 FileReader API 可以将 Blob 对象读取为不同的数据格式。 例如可以将 Blob 读取为图片文件格式。 !DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/title/headbodyinput typefile idfileInput acceptimage/* /
div idimageContainer/divscriptconst fileInput document.getElementById(fileInput);
const imageContainer document.getElementById(imageContainer);fileInput.addEventListener(change, function (event) {const file event.target.files[0];// startsWith() 方法用于检测字符串是否以指定的子字符串开始。判断是否上传的文件是图片类型if (file file.type.startsWith(image/)) { const reader new FileReader();// 读取完成时触发reader.onload function (e) {// 设置图片样式 const img document.createElement(img);img.src e.target.result;img.style.maxWidth 500px;img.style.margin 10px;imageContainer.innerHTML ;imageContainer.appendChild(img);};//获取API异步读取的文件数据另存为数据URLreader.readAsDataURL(file);} else {alert(请选择一个有效的图片文件。);}});/script/body
/html
Blob 和 Base64 有时需要将 Blob 转换为 Base64 编码的数据例如用于图像的显示或传输。可以通过 FileReader 来实现。
const reader new FileReader();
reader.onloadend function () {const base64data reader.result;console.log(base64data); // 输出 base64 编码的数据
};
reader.readAsDataURL(blob); // 将blob读取为dataurl
2.File介绍
File 是js中代表文件的数据结构继承自Blob对象包含文件的元数据文件名、文件大小、类型等。 File 对象可以通过 input typefile 选择文件时创建也可以使用 js构造函数创建。
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/title/headbodyinput typefile idmyFileInput /scriptdocument.getElementById(myFileInput).addEventListener(change, (event) {const file event.target.files[0];console.log(file--:, file);console.log(文件名:, file.name);console.log(文件类型:, file.type);console.log(文件大小:, file.size);});/script/body
/html
也可以使用 File 的方式获取用户上传的文件手动创建 File 对象
// new File(文件内容,文件名,文件格式)
const file new File([Hello, world!], hello-world.txt, {type: text/plain,
});
console.log(file); File 对象继承了 Blob 对象的方法因此可以使用一些 Blob 对象的方法来。 file.slice() // 获取文件的前 10 个字节
const blob file.slice(0, 10); file.text() file.text().then((text) {// 输出文件的文本内容console.log(text);
}); file.arrayBuffer() file.arrayBuffer().then((buffer) {// 输出文件的 ArrayBufferconsole.log(buffer);
});
file.stream() const stream file.stream();
3.总结
Blob 是二进制数据它可以存储任何类型的数据但不具有文件的元数据如文件名、最后修改时间等。
File 是 Blob 的子类File 对象除了具有 Blob 的所有属性和方法之外还包含文件的元数据如文件名和修改日期
File 对象也就是带有文件信息的 Blob。
在文件上传和二进制数据处理的场景中被广泛使用。Blob 更加通用而 File 更专注于与文件系统的交互。
const file new File([Hello, world!], hello.txt, { type: text/plain });
console.log(file instanceof Blob); // true
