前两天同事踩了个特别离谱的坑，折腾大半天没搞明白。他做大文件上传功能，用 input 文件选择框拿到本地文件，然后用 slice 方法给文件做分片，准备搞分片上传。结果把切好的文件片段传给后端，后端一直报错：找不到文件名。他当场懵了：原始文件明明有名字，后缀也齐全，怎么一切片，文件名直接凭空消失了？其实根本原因特别简单：他压根没分清 JS 里的 Blob 和 File。很多前端老手都在这里栽过跟头，今天用大白话给你讲透，以后再也不踩这个坑。一、先搞懂：Blob 到底是个啥？你别记那些专业术语，直接把Blob 理解成一个纯二进制收纳桶。它只管装图片、视频、文本、文件这类二进制数据，别的啥都不管，只记两个信息：size：数据占多大内存type：文件的格式类型，比如图片、文本、JSON它就只是单纯的一堆二进制数据，没有名字、没有修改时间，光秃秃一个数据包。随便写个简单例子，就能造出一个 Blob：// 把普通文本塞进二进制桶里consttextData='前端踩坑：Blob和File别搞混';constmyBlob=newBlob([textData],{type:'text/plain'});console.log(myBlob.size);// 占用大小console.log(myBlob.type);// 文件类型console.log(myBlob.name);// undefined 压根没有文件名！平时我们用它最多的场景：接口拿图片二进制、生成图片预览链接、做文件下载、文件临时切片。二、再搞懂：File 又是个啥？一句话：File 就是带身份证的 Blob。它天生继承了 Blob 所有的能力，能用 Blob 的所有方法，但是多了两个关键身份信息：name：实打实的文件名，比如风景.jpg、简历.pdflastModified：文件最后一次修改的时间戳我们平时用input type="file"选本地文件、拖拽上传拿到的，全都是 File 对象。示例代码：// 文件选择框监听选文件document.querySelector('#fileInput').addEventListener('change',function(e){// 拿到选中的本地文件，是标准 File 对象constfile=e.target.files[0];console.log(file.name);// 有文件名console.log(file.size);// 文件大小console.log(file.type);// 文件格式console.log(file.lastModified);// 修改时间戳 });三、一张大白话分清两者区别特点BlobFile有没有文件名没有自带 name 文件名有没有修改时间没有自带 lastModified怎么生成代码 new Blob 创建本地选文件、拖拽文件，也能代码手动 new File适合干啥临时存二进制、切片、预览、下载正式上传、要展示文件名、后端校验文件记住一句核心：File 能当 Blob 用，但 Blob 绝对不能直接当 File 用，因为缺了文件名这些关键信息。四、三个高频踩坑点，全是真实工作里常遇到的