首页 > 其他分享 >前端 Blob 与 File 捎带 FormData 摘要

前端 Blob 与 File 捎带 FormData 摘要

时间:2022-10-14 16:55:16浏览次数:45  
标签:FormData base64 Blob File new blob

 

 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对象

 

标签:FormData,base64,Blob,File,new,blob
From: https://www.cnblogs.com/ygrzzttzjzzzszz/p/16792119.html

相关文章