关于typeArray
---这篇文档开头讲的很通俗易懂https://juejin.cn/post/7046313942938812424#heading-0
Uint8Array---将 ArrayBuffer 中的每个字节(8位)视为 0 到 255 之间的单个数字(每个字节是 8 位)。 这称为 “8 位无符号整数”。
Uint16Array---将每 2 个字节(16位)视为一个 0 到 65535 之间的整数。这称为 “16 位无符号整数”。
Uint32Array---将每 4 个字节(32位)视为一个 0 到 4294967295 之间的整数。这称为 “32 位无符号整数”。
Float64Array---将每 8 个字节(64位)视为一个 5.0x10-324 到 1.8x10308 之间的浮点数。
为什么会看到 arrayBuffer typeArray Blob
之前整理FormData上传文件的时候,涉及到了文件的切片上传,后来项目中也有用到了spark-md5,通过汇总文件切片计算文件的md5
这些都涉及到了FileReader API,而FileReader继承自Blob。
由文件的下载,引出了通过Blob处理后台返回二进制文件,这里又涉及到了BlobUrl(url.createObjectURL--同步方法)和DataUrl(base64字符串,FileReader的readAsDataUrl实例方法--异步方法)。所以找了一些文章,了解下arrayBuffer的前因后果
这里是几篇很不错的文章
前端二进制ArrayBuffer、TypedArray、DataView、Blob、File、Base64、FileReader一次性搞清楚
https://juejin.cn/post/7046313942938812424#heading-0
JavaScript 类型化数组
https://blog.csdn.net/qq_36171287/article/details/111510183
ArrayBuffer(二进制数据的原始缓冲区)
https://blog.csdn.net/simon_xing/article/details/81519443
Blob 下载文件时 type 类型 大全
https://blog.csdn.net/yin_you_yu/article/details/116261304
前端下载文件以及上传图片预览,顺便了解arrayBuffer和blob
https://juejin.cn/post/6844903846137823246#heading-1
视频类up主讲述api的关系与使用
https://www.bilibili.com/video/BV1XD4y1C7S3/?spm_id_from=333.337.search-card.all.click&vd_source=8373140d266a02a7da2260542eccf868
Base64
base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,它的目的是用ASCII中定义的可见字符去表示任意的二进制数据。之所以要这样做,是因为计算机中很多数据是只能通过可见字符去传输的(比如我们的网站网址,比如一些面向字符的网络协议如SMTP等),但是这些情景有时又需要去传输二进制数据。基于这样的需要,诞生了Base64. 简单来讲,Base64就是用下列总计64个字符
a-z A-Z 0-9 + /
二进制数据以字节为组,一个字节8bit存在256个状态,而一个Base64字符只有64个状态,所以用每4个Base64字符去表示3个二进制字节,因为 64*64*64*64=256*256*256。这里对下划线的文字做个说明:普通情况下一个字节是8位,3个二进制字节总共24位,所以base64字符是每6位表示一个字符(24/4)。
于是大致的base64编码过程是,“早”,找出“早”的unicode码点(码点是16进制),然后将16进制转为二进制,再对二进制按照6位重新划分进行拆分补0,此时如果二进制字节的个数不是3的倍数,就用=来替代,所以形成的base64字符会存在=的情况,而且也只能是出现在最后面。重新划分完成后,将每6位的二进制转为10进制,然后去base64的编码表中找对这个10进制数字对应的字符。
js字符与base64编码
atob 的 a指的是Base64, b 指的是普通字符 因此,atob表示Base64字符to普通字符,也就是Base64解码。
btoa 的 b 指的是普通字符, a 指的是Base64字符 因此,btoa表示普通字符toBase64字符,也就是Base64编码。
关于中文的编码解码要urlencode一下
btoa(encodeURIComponent('哦豁')); //JUU1JTkzJUE2JUU4JUIxJTgx
decodeURIComponent(atob('JUU1JTkzJUE2JUU4JUIxJTgx')) //'哦豁'