前端 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对象
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」