前端 Blob 与 File 捎带 FormData 摘要

 

 Blob（Binary Large Object）表示二进制类型的大对象，通常是图片、视频、文档等

　　如上图所示 一个 blob 对象

 File 接口基于 Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。

 

type : MIME（Multipurpose Internet Mail Extensions）多用途互联网邮件扩展类型
常见的 MIME 类型有：超文本标记语言文本 .html text/html、PNG图像 .png image/png、普通文本 .txt text/plain 等。

size : 二进制文件大小

base64 图片 生成 Blob 

if (!base64.startsWith("data:image/")) {
base64 = "data:image/jpg;base64," + base64
}
let arr = dataurl.split(","),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new Blob([u8arr], { type: mime })

为blob赋两个属性，转变file

theBlob.lastModifiedDate = new Date();
theBlob.name = fileName;

此时上传的文件调用接口会使用到  FormData  对象

创建 FormData 对象实例的办法

1，var formData = new FormData(); 

创建一个空对象 使用append 向内添加属性 

append（key，value）

对于上面的文件 使用 append（key， File， fileName）的方式   （文件）

2，在html中创建一个form表单

var formData = new FormData(form); // form : dom对象