大文件上传与文件下载

大文件上传 分片 续传 秒传 | 黑马程序员

文件类型：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，后端就能按“裸二进制”接收。

---

1. 用户选了文件 ➜ 直接上传二进制流（最常用）

---

需求
只想把用户选的文件原封不动以“二进制流”形式 POST 到后端，后端收 application/octet-stream。

BASE64：

服务器：

文件下载：

预览文件：