大文件上传 分片 续传 秒传 | 黑马程序员
文件类型:1.今天一次性给你讲清楚:File、Blob、FileReader、ArrayBuffer、Base64_哔哩哔哩_bilibili

教程:
01.Axios二次封装及前后端通信常用的数据格式_哔哩哔哩_bilibili
如果你是在做 文件上传 ,用
FormData是最合适的;如果是 提交 JSON 数据 ,用
application/json;如果是 传统表单登录 ,用
x-www-form-urlencoded






前端较少直接使用,需配合 Blob 或 ArrayBuffer:怎么配合使用?
在前端,Buffer 是 Node.js 的概念,浏览器里没有 Buffer 这个类。
浏览器里对应的二进制容器是:
-
ArrayBuffer(原始字节数组,不可直接操作) -
TypedArray(如Uint8Array,可操作字节) -
Blob(带 MIME 类型的不可变原始数据,常用于文件、上传)
下面给出 3 个最常见的"前端把二进制数据发给服务器"的实战组合,看完就能直接抄代码。
一句话总结
浏览器没有
Buffer,用Blob/ArrayBuffer/TypedArray代替。
fetch/axios的body字段直接支持这些类型,无需手动转Buffer。只要
Content-Type设为application/octet-stream,后端就能按"裸二进制"接收。
- 用户选了文件 ➜ 直接上传二进制流(最常用)
需求
只想把用户选的文件原封不动以"二进制流"形式 POST 到后端,后端收 application/octet-stream。




BASE64:


服务器:

文件下载:





预览文件:

