当前位置:首页 » 《随便一记》 » 正文

一篇彻底搞懂前端文件

18 人参与  2024年11月02日 14:00  分类 : 《随便一记》  评论

点击全文阅读


在前端开发中,BlobArrayBufferBufferFileBase64 都是处理二进制数据的不同方式,它们各自有不同的用途和特点。

基本介绍

Blob

Blob 是 Binary Large Object 的缩写,表示一个不可变的、原始数据的类文件对象。Blob 对象可以用来表示文件(如图片、音频、视频等),也可以用来表示其他类型的不可修改的二进制文件。

const blob = new Blob(["Hello, world!"], { type: "text/plain" });

File

File 对象是 Blob 对象的子类,通常用于表示用户通过 <input type="file"> 选择的文件。

const file = new File(["Hello, world!"], "hello.txt", { type: "text/plain" });

Buffer

Buffer 是 Node.js 中用于处理二进制数据的对象。它是 Node.js 特有的,不是 JavaScript 标准的一部分。Buffer 类是 Uint8Array 的子类,提供了更丰富的 API 来处理二进制数据。

它类似于 ArrayBuffer,但主要用于服务器端。它能够高效地处理二进制数据,避免了频繁的内存分配和垃圾回收。

用于处理文件 I/O、网络 I/O 等需要高效处理二进制数据的场景。

const buffer = Buffer.from("Hello, world!");

ArrayBuffer

ArrayBuffer 是一种通用的、固定长度的二进制数据缓冲区。

它不能直接操作,而是需要通过 TypedArrayDataView 来读写。

与Bolb的关系

ArrayBuffer是底层二进制数据,可以借助工具进行读写,而Blob是对底层二进制数据的封装,我们拿到的就是一个整体,能够读取他的大小,类型,但是不能看到细节Blob可以接受一个ArrayBuffer作为参数生成一个Blob对象,此行为就相当于对ArrayBuffer数据做一个封装,之后就是以整体的形式展现了 -Blob作为一个整体文件,适合用于传输;而只有需要关注细节(比如要修改某一段数据时),才需要用到ArrayBuffer
const buffer = new ArrayBuffer(8); // 创建一个8字节的缓冲区const view = new Uint8Array(buffer); // 使用Uint8Array来读写缓冲区

Base64

Base64 是一种基于64个可打印字符来表示二进制数据的方法。它通常用于在文本协议中传输二进制数据,如在 HTML 中嵌入图片。

const base64String = btoa("Hello, world!"); // 将字符串转换为Base64const originalString = atob(base64String); // 将Base64转换回字符串

FileReader

通过fileReader可以将Blob、File读取为不同的格式

FileReader.readAsDataURL(blob将二进制数据读取并编码为Base64格式FileReader.readAsText(blob)就是将二进制数据读取并编码为字符串形式

FormData

使用FormData我们可以异步上传一个二进制文件,而这个二进制文件,就是我们上面讲的Blob对象

场景选择

文件上传和下载

场景:

用户上传文件到服务器。从服务器下载文件到本地。

推荐使用:

Blob: 用于表示文件对象,适合用于文件上传和下载。ArrayBuffer: 用于处理文件的二进制数据,适合在文件上传前进行预处理(如压缩、加密等)。Base64: 用于在 HTML 中嵌入文件(如图片),或者在 AJAX 请求中传输文件数据。

图片处理

场景:

在网页中显示图片。对图片进行压缩、裁剪等操作。

推荐使用:

Blob: 用于表示图片文件,适合用于文件上传和下载。ArrayBuffer: 用于处理图片的二进制数据,适合在图片处理库中使用。Base64: 用于在 HTML 中嵌入图片,或者在 AJAX 请求中传输图片数据。

音频和视频处理

场景:

播放音频和视频文件。对音频和视频进行处理(如剪辑、转码等)。

推荐使用:

Blob: 用于表示音频和视频文件,适合用于文件上传和下载。ArrayBuffer: 用于处理音频和视频的二进制数据,适合在音频和视频处理库中使用。Base64: 用于在 HTML 中嵌入音频和视频,或者在 AJAX 请求中传输音频和视频数据。

数据传输

场景:

通过 AJAX 请求传输二进制数据。通过 WebSocket 传输二进制数据。

推荐使用:

ArrayBuffer: 用于传输二进制数据,适合在 AJAX 和 WebSocket 中使用。Base64: 用于在文本协议中传输二进制数据,适合在 AJAX 请求中传输文件数据。

数据存储

场景:

在浏览器中存储二进制数据(如使用 IndexedDB)。在服务器端存储二进制数据(如使用数据库)。

推荐使用:

ArrayBuffer: 用于存储二进制数据,适合在 IndexedDB 和数据库中使用。Base64: 用于在文本协议中存储二进制数据,适合在数据库中存储文件数据。

总结

Blob: 适合用于表示文件对象,适合文件上传和下载。ArrayBuffer: 适合用于处理二进制数据,适合在文件处理、音频视频处理、数据传输和存储中使用。Base64: 适合用于在文本协议中传输和存储二进制数据,适合在 HTML 中嵌入文件和在 AJAX 请求中传输文件数据。

转换方式

File转Blob

let aBlob = new Blob([file], {type: file.type})

Blob转File

let files = new window.File([this.blob], file.name, {type: file.type})

Blob 转 ArrayBuffer

const blob = new Blob(["Hello, world!"], { type: "text/plain" });const reader = new FileReader();reader.onload = function(event) {    const arrayBuffer = event.target.result;    console.log(arrayBuffer);};reader.readAsArrayBuffer(blob);

ArrayBuffer 转 Blob

const buffer = new ArrayBuffer(8);const blob = new Blob([buffer], { type: "application/octet-stream" });

Blob 转 Base64

const blob = new Blob(["Hello, world!"], { type: "text/plain" });const reader = new FileReader();reader.onload = function(event) {    const base64String = event.target.result;    console.log(base64String);};reader.readAsDataURL(blob);

Base64 转 Blob

const base64String = "data:text/plain;base64,SGVsbG8sIHdvcmxkIQ==";const byteCharacters = atob(base64String.split(',')[1]);const byteNumbers = new Array(byteCharacters.length);for (let i = 0; i < byteCharacters.length; i++) {    byteNumbers[i] = byteCharacters.charCodeAt(i);}const byteArray = new Uint8Array(byteNumbers);const blob = new Blob([byteArray], { type: "text/plain" });

ArrayBuffer 转 Base64

const buffer = new ArrayBuffer(8);const view = new Uint8Array(buffer);const base64String = btoa(String.fromCharCode.apply(null, view));

Base64 转 ArrayBuffer

const base64String = "SGVsbG8sIHdvcmxkIQ==";const byteCharacters = atob(base64String);const byteNumbers = new Array(byteCharacters.length);for (let i = 0; i < byteCharacters.length; i++) {    byteNumbers[i] = byteCharacters.charCodeAt(i);}const byteArray = new Uint8Array(byteNumbers);const buffer = byteArray.buffer;

图片URL转base64

img2base64(imgUrl) {  let image = new Image()  image.src = imgUrl  return new Promise((resolve) => {    image.onload = () => {      let canvas = document.createElement('canvas')      canvas.width = image.width      canvas.height = image.height      var context = canvas.getContext('2d')      context.drawImage(image, 0, 0, image.width, image.height)      let dataUrl = canvas.toDataURL('image/png')      resolve(dataUrl)    }  })}

点击全文阅读


本文链接:http://zhangshiyu.com/post/181471.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 冬季宜密雪:结局+番外精编之作(季雯,江随筝)完整章节列表_笔趣阁
  • 完结文末日重生我囤十亿物资杀穿尸潮列表_完结文末日重生我囤十亿物资杀穿尸潮(林野苏晴)
  • 小说江诗云路明哲小说已更新+番外篇章(年少的爱终将散去)纯净阅读
  • 真千金伪装大学生在自家公司实习让狗爬后一口气看完_宋氏小林小姑娘高分神作_小说后续在线阅读_无删减免费完结_
  • 萧逸尘,楚璃,叶紫嫣爱恨决绝,此生不见番外(爱恨决绝,此生不见)TXT+后续+结局在线阅读
  • 假千金要交换人生?我抱着空间做首富爽文_苏木青赵景城虐心反转_小说后续在线阅读_无删减免费完结_
  • 温时雨谢远之续集(清风难渡无缘人)全本完整免费版_起点章节+后续(温时雨谢远之)
  • 订婚两个月后,未婚夫要摆脱包办婚姻精心打造_肖明宝宝宾客故事会_小说后续在线阅读_无删减免费完结_
  • 霍景琛,苏晚,林深昔年请深如海,终不敌薄凉附加(霍景琛,苏晚,林深)(昔年请深如海,终不敌薄凉)全本浏览阅读连载中
  • 新章速递汤安甯,白子奕,汤贝贝是什么小说(结婚十年,回归家庭的老婆在外有二胎了)完本阅读无广告(结婚十年,回归家庭的老婆在外有二胎了)
  • 娇牛马导师偷我论文99篇成功升博导,我让他牢底坐穿精校文本_周老师师姐师兄爽文_小说后续在线阅读_无删减免费完结_
  • 独家顾宇,罗薇:结局+番外精编之作(资助生装阔气,我可不参加)电子书畅享阅读

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1