大文件上传与文件下载

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

文件类型: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/axiosbody 字段直接支持这些类型,无需手动转 Buffer

  • 只要 Content-Type 设为 application/octet-stream,后端就能按"裸二进制"接收。


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

需求

只想把用户选的文件原封不动以"二进制流"形式 POST 到后端,后端收 application/octet-stream

BASE64:

服务器:

文件下载:

预览文件:

相关推荐
Dragon Wu44 分钟前
Electron Forge集成React Typescript完整步骤
前端·javascript·react.js·typescript·electron·reactjs
芳草萋萋鹦鹉洲哦44 分钟前
【Tailwind】动画解读:Tailwind CSS Animation Examples
前端·css
华仔啊1 小时前
jQuery 4.0 发布,IE 终于被放弃了
前端·javascript
一心赚狗粮的宇叔1 小时前
03.Node.js依赖包补充说明及React&Node.Js项目
前端·react.js·node.js
子春一1 小时前
Flutter for OpenHarmony:音律尺 - 基于Flutter的Web友好型节拍器开发与节奏可视化实现
前端·flutter
JarvanMo1 小时前
150万开发者“被偷家”!这两款浓眉大眼的 VS Code 插件竟然是间谍
前端
亿元程序员1 小时前
大佬,现在AI游戏开发教程那么多,你不搞点卖给大学生吗?
前端
未来龙皇小蓝1 小时前
RBAC前端架构-02:集成Vue Router、Vuex和Axios实现基本认证实现
前端·vue.js·架构
晓得迷路了1 小时前
栗子前端技术周刊第 116 期 - 2025 JS 状态调查结果、Babel 7.29.0、Vue Router 5...
前端·javascript·vue.js
顾北122 小时前
AI对话应用接口开发全解析:同步接口+SSE流式+智能体+前端对接
前端·人工智能