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

 

posted @   南巷清风--大R  阅读(202)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
点击右上角即可分享
微信分享提示