前两天同事踩了个特别离谱的坑，折腾大半天没搞明白。

他想实现大文件分片上传：先用 `` 选取本地文件。接下来用 `slice` 方法把文件切成块，再把切好的块送往后端。至于结果后端报错，“找不到文件名”。话说回来，

这到底是为什么？原始文件确实有名字、后缀，但切片后文件名消失了。

Blob 与 File 的本质区别

在前端处理二进制数据时经常会碰到两个对象：Blob 和 File。它们看起来很像，但却有关键差别。

Blob

• No name: Blob 本身不携带文件名。
• No lastModified: 没有修改时间戳。
• Keeps size & type: 只记录占用大小和 MIME 类型。
• Main uses: 接口返回图片二进制、生成预览链接、做临时存储、Canvas 导出等。

File

• Name + lastModified: 继承自 Blob 并额外携带真实文件名和最终修改时间戳。
• Create from input or drag-drop: `` 或拖拽得到的对象都是 File。
• Main uses: 正式上传、需要展示文件信息或后端校验时必选。

主要一句话的观点是。File 可以当作 Blob 使用，但 Blob 绝对不能直接当作 File 用，因为缺失关键信息。

再看痛点一，切片后丢失文件名！其实，到底为什么会这样，

从许多人误以为来看，

// 选中一个 File
const file = e.target.files;// 切片
const chunk = file.slice;// 期望得到的是一个新的 File
console.log;老实说，// ❌ undefined

.slice 返回的是一个 **普通 Blob**。所以没有 name 属性。于是你把无名 Chunk 发给后台，后台自然报错：“找不到文件名”。这正是同事遇到的坑，

再看解决办法，给每个块重新包装成 File 丢失信息回补回来！

// 原始 File
const file = e.target.files;老实说，// 切片得到 Blob
const chunkBlob = file.slice;// 用原始 name & lastModified 包装成新的 File
const chunkFile = new File(。file.name,{
至于type，file.type,lastModified: file.lastModified
});console.log，// ✅ 正常显示！formData.append;按理说，await fetch;

再看痛点二，直接上传 Blob 后端收到的是 “blob” 或 “blob.bin”——没法通过后缀校验！

This is anor common mistake.

// 从接口拿到图片 Blob
const blob = await fetch.n);const formData = new FormData;formData.append;// ❌ 后端收到 filename=blob 或 blob.bin
await fetch;

修复办法这方面，手动为 Blob 指定一个合理的名字与 MIME 类型。

const blob = await fetch.n);const avatarFile = new File;const formData = new FormData;formData.append;await fetch，

痛点三的观点是，ObjectURL 不释放导致页面卡顿 / 内存泄漏！按理说，

const url = URL.createObjectURL;img.src = url;
不过，// ❌ 页面打开多次会堆积内存
// 正确做法：
img.onload = => {
URL.revokeObjectURL;}，img.src = url;

什么时候该用 Blob？什么时候该用 File，

请根据实际项目情况补充对应表格内容。

// 分片上传主流程
async function uploadInChunks {
const CHUNK_SIZE = 1024 * 512;按理说，// 每块500KB
const totalChunks = Math.ceil;
for {
const startPos = i * CHUNK_SIZE;const endPos = Math.min;// 切片得到普通 Blob
const sliceBlob = file.slice;// 给每块包一层“身份证”
const sliceAsFile =
new File(,file.name。{
type : file.type,lastModified : file.lastModified,});const form =
new FormData;其实，form.append;form.append，说起来，form.append;form.append，await fetch('/api/uploadChunk'。{
method : 'POST',body : form,});}


}
document.querySelector
.addEventListener('change',e => uploadInChunks);不过，// 使用完毕就可以删除引用防止内存泄漏…，

html


javascript
// 上面已包含所有关键步骤，请直接粘贴使用。


如果还有问题，可以继续提问。我会帮你进一步拆解问题根源与解决思路～️‍💻️️️️️️️️️️️🛠️🛠️🛠️🛠️🛠️🛠️🛠️🛠💡💡💡💡 💬💬💬 💭💭💭 💥💥💥 🎉🎉🎉✂✂✂🚀🚀🚀⚙⚙⚙🏗🏗🏗 🏗🏗🏗🔧🔧🔧🐞🐞🐞🚨🚨🚨🔒🔒🔒 🔓🔓🔓🔥🔥🔥🌟🌟🌟🙌🙌🙌👍👍👍👎👎👎😱😱😱🤯🤯🤯