目录
1.FormData：表单数据的键值对集合的
let formData = new FormData(); //创建一个formData的容器
formData.append("name", "lili") //朝容器里，追加一个数据
formData.set("age", 12) // 设置一个值，如果有，就替换原来的，没有就添加
formData.has("age") //容器里有没有该属性
formData.get("name") //获取某个属性的值
formData.getAll("name") //获取该属性所有的值，以数据的形式展示
formData.delete("name") //删除存储的某个属性
formData.clear() //清除所有的属性2.blob详解
blob是存储二进制的对象；blob对象不能修改，只能通过fileReader读取
2.1创建blob对象
let blob = new Blob(["测试"], { type: "text/plain" })格式：new Blob(arr, options)
- arr：ArrayBufferView、ArrayBuffer、Blob、DOMString 等数组组成
- options：配置参数
type：存储的类型
endings：结尾的\n如何被写入，默认为tranparent
2.2常用的属性
- size：blob对象存储的数据的大小（字节）
- type：blob对象存储的数据的类型
常用类型有一下几种：
let blob = new Blob(["javascript"]);
blob.size // 9
blob.type // ""; type未指定，默认为空2.3常用的方法
slice(start, end, options)：截取一段blob片段，返回一个新的片段组成的blob对象，
- start：开始截取的下标（必选）
- end：结束点的下标（非必选）
- options：和blob对象的blob一致（非必须）
let blob = new Blob(["text data"])
let newBlob = blob.slice(2, 5)2.4blob追加数据
blob对象是一个不可修改的对象，即blob创建之后，不能添加数据，但是可以创建新的blob对象，将其添加到新blob中；即可达到给blob对象追加数据的操作
//构造一个添加blob数据的方法
function MyAppendBlob(options) {
this.parts = []
this.options = options || { type: "text/pain }
}
//追加数据
MyAppendBlob.prototype.append = function (data) {
this.parts.push(data);
this.blob = undefind;
}
//获取blob的对象
MyAppendBlob.prototype.get = function () {
if(!this.blob) {
this.blob = new Blob(this.parts, this.options)
}
return this.blob
}
let myBlob = new MyAppendBlob() //创建一个MyAppendBlob实例
myBlob.append("test data") //添加一个数据
myBlob.get() //获取blob对象3.file对象
file是特殊的blob对象
通常input的type为file时，即可或取file对象；也可以通过File对象，去构造一个file实例
3.1通过文件上传获取file对象
<input type="file" />
let input = document.querySelect("input[type='file']"); //获取input框
input.onchange = (e) => {
let files = e.target.files //获取上传文件选择的file对象
}3.2通过File构造宇哥file实例
获取file实例：new File(arr，name，type)
- arr：一个buffer，blob，string组成的数组
- name：file的文件名字
- type：类型，同上文的blob对象的type（非必选）
let file = new File(["test"], "text.txt", { type: "text/plain" })3.3file的一些属性
lastModified：引用文件最后修改日期，为自1970年1月1日0:00以来的毫秒数lastModifiedDate：引用文件的最后修改日期name：引用文件的文件名size：引用文件的文件大小type：文件的媒体类型（MIME）webkitRelativePath：文件的路径或 URL
4.FileReader：读取文件
用于异步从用户端，读取文件的信息，可以将blob对象，修改成不同的类型
4.1创建fileReader实例
let fileReader = new FileReader()4.2fileReader的一些方法
onabort：取消读取文件
onload：读取完成
onprogress：读取中触发
onerror：读取失败触发
onloadend：无论失败还是成功都会触发
const fileReader = new FileReader()
fileReader.onload = (e) => {
console.log(e)
}4.3fileReader的一些读取属性
readAsText：读取blob的内容，完成之后，在result里面包含一个字符串的内容
readAsBinaryString：读取blob的内容，完成之后，在result里面包含一个原始二进制数据
readAsArrayBuffer：读取blob的内容，完成之后，在result里面包含一个buffer的数组
readAsDataURL：读取blob的内容，完成之后，在result里面包含一个data:URL的base64字符串
const f = new FileReader();
const b = new Blob(["2121"], { type: "text/plain" })
f.onload = (e) => {
console.log(e.target.result) //'data:text/plain;base64,MTEx'
}
f.readAsDataURL(b)5.ArrayBuffer详解
buffer对象是一个特殊的存储数据的数组
int：表示有符号的数据
uint：表示无符号的数据
float：表示浮点数
let buffer = new ArrayBuffer(32) //创建一个32位的buffer空数组
buffer[1] = 100 //给buffer数组添加数据
let intBuffer = new Int8Array(buffer) //创建一个有符号的8位数组
intBuffer[0] = 2 //添加数据
let dataBuffer = new DataView(buffer) //dataView只能接受一个ArrayBuffer的数组
dataBuffer.setInt8(0, 100) //给dataBuffer添加值
dataBuffer.getInt8(0) //获取dataBuffer添加的值除了dataView的对象外，其他buffer的数组都可以相互转化；都可以用数组的操作去获取值，设置值；dataView只能使用get方法获取值，set方法设置值
6.base64详解
btoa：编码，将一个字符串或者二进制文件转化为base64字符串
atob：解码，将一个base64字符串转化成原始的字符串
通过canvas获取base64
const canvas = document.createElemet("canvas");
const context = canvas.getContext("2d");
context.arc(300, 150, 150, 0, Math.PI / 180 * 360, true)
context.stroke()
let data = context.toDataURL();
console.log(data)
7.file，blob，base64之间的互转
7.1blob转file
-
7.1.1通过file构造函数，将blob转为file
let blob = new Blob(["45"], { type: "text/plain" })
let file = new File([blob], "test.name")-
7.1.2直接blob转file
let blob = new Blob(["test"])
blob.lastModifiedDate = new Date()
blob.name = "test.txt"
let file = new File([blob], "test.txt")7.2blob转base64
let blob = new Blob(["test"])
let fileReader = new FileReader()
fileReader.onload = (e) => {
let result = e.target.result;
let base64 = result.split(",")[1]
}
fileReader.readAsDataURL(blob)7.3base64转blob
7.3.1无data的前缀的base编码
const base64 = btoa("test") //初始化一个base64字符串
const str = atob(base64) //解码base64
let len = str.length;
let int8Array = new Int8Array(len); //一个8位有符号的buffer数组
while(len--) {
int8Array[len] = str.charCodeAt(len)
}
let blob = new Blob(int8Array)7.3.1有data的前缀的base编码
let data = 'data:application/octet-stream;base64,dGVzdA=='
let strArr = data.split(",")
let str = strArr[1]
let type = strArr[0].match(/:(.*?);/)[1]
let len = str.length;
let int8Arr = new Int8Array(len)
while(len--) {
int8Arr[len] = str.charCodeAt(len)
}
let blob = new Blob([int8Arr], { type })7.4base64转file
先把base64转化成blob，然后再把blob转成file
let data = 'data:application/octet-stream;base64,dGVzdA=='
let strArr = data.split(",") //获取需要转化的base64字段
let str = strArr[1]
let type = strArr[0].match(/:(.*?);/)[1] //获取type
let len = str.length;
let int8Arr = new Int8Array(len)
while(len--) {
int8Arr[len] = str.charCodeAt(len)
}
let blob = new Blob([int8Arr], { type })
let filename = "test.txt" // 文件后缀名
let file = new File([blob], filename)7.4file转base64
let file = new File(["test", "test.txt"], { type: "text/plain" }) //初始化file
let reader = new FileReader()
reader.onload = (e) => {
let base64 = e.target.result
}
reader.readAsDataURL(file)
5094
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
