当前位置：首页 > news >正文

【文件上传系列】No.0 利用 FormData 实现文件上传、监控网路速度和上传进度（原生前端，Koa 后端）

news 2026/2/10 20:01:50

利用 FormData 实现文件上传

基础功能：上传文件

演示如下：

请添加图片描述

概括流程：

前端：把文件数据获取并 append 到 FormData 对象中
后端：通过 ctx.request.files 对象拿到二进制数据，获得 node 暂存的文件路径

前端

前端的工作就是把页面写好，ajax 和 FormData 组装好，发送给后端。

基础功能：组装 FormData 和 XHR

前端这边代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><input type="file" name="file" id="file" /><button id="btn">点我上传</button></body><script>const btn = document.getElementById('btn');btn.onclick = function () {let file = document.querySelector('#file').files[0];console.log(file);// 组装好 formData// 文件传输是通过正文传输的，所以要用 postlet formData = new FormData(); // 这里的 new formData() 会自动帮我设置 content-typeformData.append('data', file);formData.append('name', '文件');formData.append('年龄', 20);// 组装好 xhrlet xhr = new XMLHttpRequest();xhr.open('post', '/upload');xhr.onload = function () {console.log(xhr.responseText);};xhr.send(formData);};</script>
</html>

基础：xhr.upload 上传钩子函数

大概有如下几个钩子（比较常用的）

xhr.upload.onprogress = (event) => {console.log('上传过程');
}
xhr.upload.onload = () => {console.log('上传成功');
}
xhr.upload.onloadend = () => {console.log('上传完成');
}
xhr.upload.onabort = () => {console.log('取消上传');
}

onprogress 这个函数是在上传过程中不断循环被执行的，其中有事件因子 event，里面会有上传中的信息

如果想要监控速度和进度的话，可以在上传的过程中计算出来

如果想要取消上传，就把 xhr.abort() 即可。

document.getElementById('cancelBtn').addEventListener('click', function () {// 取消上传xhr.abort();
});

基础：利用钩子函数计算下载速度和进度

速度：思路就是求出一段时间的下载量(byte)和一段时间(s)，然后做除法
$\frac{{\rm d}单位数据包大小 byte}{{\rm d }单位时间 s}{byte/s}$

let oldDataSize;
let oldTime;
xhr.onload = function () {let responseText = xhr.responseText;console.log("上传成功", responseText);
};
xhr.upload.onloadstart = () => {console.log("上传开始！");oldLoaded = 0;oldTime = new Date().getTime();
};
xhr.upload.onprogress = (enent) => {// 计算单位时间文件加载大小let duringLoaded = event.loaded - oldLoaded;// 计算单位时间差let duringTime = (new Date().getTime() - oldTime) / 1000; // 时间戳，默认单位是毫秒// 记录旧的数据，下次循环的时候需要用的oldTime = new Date().getTime();oldLoaded = event.loaded;console.log("上传中:>>", event);
};

进度：已经上传的数据loaded 与总数据 total 的比值
$\frac{已上传数据包大小 byte}{总文件大小 byte} { * } {100}{\%}$

完善：添加进度条以及速度标识

整体代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><input type="file" name="file" id="file" /><div>进度： <progress value="0" max="100" id="progress"></progress></div><div>速度： <span id="speed"></span> <span id="unit"></span></div><button id="btn">上传</button><button id="cancelBtn">取消上传</button></body><script>const btn = document.getElementById('btn');let xhr = new XMLHttpRequest();let oldDataSize;let oldTime;btn.onclick = function () {let file = document.querySelector('#file').files[0];console.log(file);// 组装好 formData// 文件传输是通过正文传输的，所以要用 postlet formData = new FormData(); // 这里的 new formData() 会自动帮我设置 content-typeformData.append('data', file);formData.append('name', '文件');formData.append('年龄', 20);// 组装好 xhrxhr.open('post', '/upload');xhr.onload = function () {console.log(xhr.responseText);};xhr.upload.onloadstart = (event) => {console.log('开始上传');oldLoaded = 0;oldTime = new Date();};// onprogress 钩子函数会不停地被调用xhr.upload.onprogress = (event) => {console.log('正在上传:>>', event);// 计算速度let duringLoaded = (event.loaded - oldLoaded) / 1024;let duringTime = (new Date() - oldTime) / 1000; // 时间戳，默认单位是毫秒// 记录旧的数据，下次循环的时候需要用的oldTime = new Date();oldLoaded = event.loaded;let speed = duringLoaded / duringTime; // 单位是 bt/slet unit = 'b/s';if (speed > 1024) {speed = speed / 1024;unit = 'kb/s';}if (speed > 1024) {speed = speed / 1024;unit = 'mb/s';}if (speed > 1024) {speed = speed / 1024;unit = 'gb/s';}if (speed > 1024) {speed = speed / 1024;unit = 'tb/s';}document.getElementById('speed').innerHTML = `${speed}`;document.getElementById('unit').innerHTML = `${unit}`;// 计算进度const { total, loaded } = event;let progress = ((loaded / total) * 100).toFixed(0);document.getElementById('progress').value = progress;};xhr.upload.onload = () => {console.log('上传成功');};xhr.upload.onloadend = () => {console.log('上传完成');};xhr.upload.onabort = () => {console.log('取消上传');};xhr.send(formData);};document.getElementById('cancelBtn').addEventListener('click', function () {// 取消上传xhr.abort();});</script>
</html>

后端

后端获取相应数据的方式如下：

router.post('/upload', ctx => {console.log(ctx.request.body);  // 接收文字console.log(ctx.request.files); // 接收文件信息
})

node 会帮我们把二进制文件存储到临时地址，我们可以通过 fs 模块拿到文件，然后写到自己想要的位置

在这里插入图片描述

基本功能：拿到二进制数据并转存文件

后端接收注意要在 KoaBody 这里允许上传文件，具体的知识点可以阅读一下这篇博文：理解 HTTP 中的 multipart/form-data

app.use(KoaBody({multipart: true
}))

在这里插入图片描述

后端代码如下：

const Koa = require('koa');
const View = require('koa-views');
const Router = require('koa-router');
const { koaBody } = require('koa-body');
const Static = require('koa-static');
const fs = require('fs');
const app = new Koa();
const router = new Router();
app.use(View(__dirname));
app.use(Static(__dirname));
app.use(koaBody({ multipart: true }));
// 异步函数
router.get('/', async (ctx, next) => {await ctx.render('index.html');
});// 异步函数
router.post('/upload', async (ctx, next) => {console.log('ctx.request.files:>>', ctx.request.files);console.log('ctx.request.body:>>', ctx.request.body);const filePath = ctx.request.files.data.filepath;const readFile = fs.readFileSync(filePath);fs.writeFileSync('static/' + ctx.request.files.data.originalFilename, readFile);ctx.body = '请求成功';
});app.use(router.routes());
app.listen(3000, () => {console.log('server start:>>', 'http://localhost:3000');
});

优化：文件夹的判断以及错误处理

可以检测文件夹是否存在，如果文件夹不存在的话自然会报错，完善后的代码如下

/*** 说明：* fs.exists() 已弃用，但 fs.existsSync() 不是。* fs.exists() 的 callback 参数接受与其他 Node.js 回调不一致的参数。 fs.existsSync() 不使用回调* 参考地址：https://nodejs.cn/api/fs/fs_existssync_path.html*/
router.post('/upload', async (ctx, next) => {try {//   console.log('ctx.request.files:>>', ctx.request.files);//   console.log('ctx.request.body:>>', ctx.request.body);const data = ctx.request.files.data;const { filepath, originalFilename } = data;if (!fs.existsSync(`static`)) {fs.mkdirSync('static');}const readFile = fs.readFileSync(filepath);fs.writeFileSync(`static/${originalFilename}`, readFile);ctx.body = '请求成功';} catch (err) {console.log(err);}
});

断点续传

Q & A

Error: options.maxFileSize (209715200 bytes) exceeded, received 209731427 bytes of file data

在这里插入图片描述

这是后端有上传文件大小限制的问题，在 koa-body 配置中把文件改的大一些，默认是 200mb，点我查看源文档

在这里插入图片描述

/*** 设置上传文件大小最大限制，默认1000M* https://github.com/node-formidable/formidable*/
app.use(koaBody({multipart: true,formidable: {maxFileSize: 1000 * 1024 * 1024, },})
);

【文件上传系列】No.0 利用 FormData 实现文件上传、监控网路速度和上传进度（原生前端，Koa 后端）

利用 FormData 实现文件上传基础功能：上传文件演示如下： 概括流程： 前端：把文件数据获取并 append 到 FormData 对象中后端：通过 ctx.request.files 对象拿到二进制数据，获得 node 暂存的文件路径前端…...

编程日记 2023/12/8 7:56:51

web前端之JavaScrip的笔试题

MENU Promise笔试题-02prototype和__proto__的笔试题JavaScript引用类型值值操和运算符优先级比较--笔试原型与原型链--笔试-05作用域-笔试事件队列-笔试题JavaScript之变量提升-笔试题JavaScript之原型链--笔试题 Promise笔试题-02 console.log(1); // 宏仁务 2 setTimeout(_…...

编程日记 2023/12/8 7:55:50

生活、工作常用API免费接口

身份证识别OCR：传入身份证照片，识别照片文字信息并返回，包括姓名、身份证号码、性别、民族、出生年月日、地址、签发机关及有效期。二维码识别OCR：对图片中的二维码、条形码进行检测和识别，返回存储的文字内容。银行卡…...

编程日记 2023/12/8 7:53:48

PHP使用mkcert本地开发生成HTTPS证书 PhpEnv集成环境

PHP使用mkcert本地开发生成HTTPS证书 PhpEnv集成环境前言一、介绍 mkcert二、安装/使用 mkcert1. 安装2. 使用总结前言本地开发时有些功能只有在 https 证书的情况下才能使用, 例如一些 Web API 一、介绍 mkcert Github地址 mkcert 是一个制作本地可信开发证书的简单工具。…...

编程日记 2023/12/8 7:52:48

DHTMLX Scheduler PRO 6.0.5 Crack

功能丰富的 JavaScript调度程序 DHTMLX Scheduler 是一个 JavaScript 日程安排日历，具有 10 个视图和可定制的界面，用于开发任何类型的日程安排应用程序。 DHTMLX JS 调度程序库的主要特性我们的 JS 调度程序最需要的功能之一是时间轴视图。借助时间轴…...

编程日记 2023/12/8 7:50:46

AddressSanitizer和LeakSanitizer有什么区别

AddressSanitizer（ASan）和LeakSanitizer（LSan）都是用于内存错误检测的工具，它们的主要区别在于检测的问题类型和应用场景。 AddressSanitizer（ASan）: ASan是一种用于检测内存错误的工具&#xf…...

编程日记 2023/12/8 7:48:44

CoreDNS实战(二)-CoreDNS+ETCD实现DNS服务发现

1 引言在前面的文章中讲了如何搭建一个内网的DNS服务，但是这里有个问题，mxsm-register.local表示局域网的注册中心域名，如果需要将每台部署了注册中心的IP地址写到CoreDNS的配置文件中。这样就需要每次都去修改 Corefile 配置文件。那有没有…...

编程日记 2023/12/8 7:47:43

B站缓存视频M4S合并MP4（js + ffmpeg ）

文章目录 B站缓存视频转MP4（js ffmpeg ）1、说明 2、ffmpeg2.1 下载地址2.2 配置环境变量2.3 测试2.4 转换MP4命令 3、处理程序 B站缓存视频转MP4（js ffmpeg ） 注意：这样的方式只用于个人之间不同设备的离线观看。请…...

编程日记 2023/12/8 7:44:41

学习IO的第四天

作业 : 使用两个子进程完成两个文件的拷贝，子进程1拷贝前一半内容，子进程2拷贝后一般内容，父进程用于回收两个子进程的资源 #include <head.h>int main(int argc, const char *argv[]) {int rd -1;if((rdopen("./01_test.c&quo…...

编程日记 2023/12/8 7:43:40

Linux：缓冲区的概念理解

文章目录缓冲区什么是缓冲区？缓冲区的意义是什么？缓冲区的刷新方式理解缓冲区用户缓冲区和内核缓冲区缓冲区在哪里？ 本篇主要总结的是关于缓冲区的概念理解，以及再次基础上对文件的常用接口进行一定程度的封装缓冲区什么是缓…...

编程日记 2023/12/8 7:42:39

中山大学李华山、王彪课题组开发 SEN 机器学习模型，高精度预测材料性能

内容一览：了解全局晶体对称性并分析等变信息，对于预测材料性能至关重要，但现有的、基于卷积网络的算法尚且无法完全实现这些需求。针对于此，中山大学的李华山、王彪课题组，开发了一款名为 SEN 的机器学习模型&#xff…...

编程日记 2023/12/8 7:39:36

二百一十、Hive——Flume采集的JSON数据文件写入Hive的ODS层表后字段的数据残缺

一、目的在用Flume把Kafka的数据采集写入Hive的ODS层表的HDFS文件路径后，发现HDFS文件中没问题，但是ODS层表中字段的数据却有问题，字段中的JSON数据不全二、Hive处理JSON数据方式 （一）将Flume采集Kafka的JSON数据…...

编程日记 2023/12/8 7:38:33

【开放集检测OSR】开放集检测和闭集检测的区别和联系：从模型角度进行理解

定义一个分类器： D t r a i n { ( x i , y i ) } i 1 N ⊂ X C D_{train} \{(x_i, y_i)\}^N _{i1} ⊂ X C Dtrain{(xi,yi)}i1N⊂XC X：输入空间 ( x i , y i ) (x_i, y_i) (xi,yi): 输入的图像x以及其对象的类别标签yC ：已知…...

编程日记 2023/12/8 7:34:30

【Flink】Flink核心概念简述

目录一、Flink 简介二、Flink 组件栈1. API & Libraries 层2. runtime层3. 物理部署层三、Flink 集群架构四、Flink基本编程模型五、Flink 的部署模式六、Flink 任务的执行模式五、Flink 的优点一、Flink 简介 Apache Flink 的前身是柏林理工大学一个研究性项目&#x…...

编程日记 2023/12/8 7:33:29

linux-tar命令、解压、压缩

压缩文件夹命令：tar -zcvf ~/test/tar_t.tar.gz /target/ 将/target/文件夹及其子文件夹和文件压缩成tar_t.tar.gz文件，并放于~/test/路径下文件命令：tar -zcvf ~/test/tar_t.tar.gz /target/file 将/target/file文件压缩成tar_t.tar…...

编程日记 2023/12/8 7:30:25

Kafka Connect ：构建强大分布式数据集成方案

Kafka Connect 是 Apache Kafka 生态系统中的关键组件，专为构建可靠、高效的分布式数据集成解决方案而设计。本文将深入探讨 Kafka Connect 的核心架构、使用方法以及如何通过丰富的示例代码解决实际的数据集成挑战。 Kafka Connect 的核心架构 Kafka Connect 的核…...

编程日记 2023/12/8 7:29:24

基于 Flink CDC 构建 MySQL 的 Streaming ETL to MySQL

简介 CDC 的全称是 Change Data Capture ，在广义的概念上，只要是能捕获数据变更的技术，我们都可以称之为 CDC 。目前通常描述的 CDC 技术主要面向数据库的变更，是一种用于捕获数据库中数据变更的技术。CDC 技术的应用场景非常广泛…...

编程日记 2023/12/8 7:23:19

创建vue项目：node.js下载安装、配置环境变量，下载安装cnpm，配置npm的目录、镜像，安装vue、搭建vue项目开发环境（保姆级教程一）

今天讲解 Windows 如何创建 vue 项目，搭建 vue 开发环境，这是这个系列的第一章，有什么问题请留言，请点赞收藏！！！ 文章目录一、Vue简单介绍二、开始搭建1、安装node.js环境2、配置npm下载时的默…...

编程日记 2023/12/8 7:22:18

uni-app 微信小程序之好看的ui登录页面（一）

文章目录 1. 页面效果2. 页面样式代码更多登录ui页面 uni-app 微信小程序之好看的ui登录页面（一） uni-app 微信小程序之好看的ui登录页面（二） uni-app 微信小程序之好看的ui登录页面（三） uni-app 微信小程…...

编程日记 2023/12/8 7:18:15

[ES]ElasticSearch强转日期的时区问题

问题由于ES不能修改时区，且默认时区始终为UTC。当才查询数据时，通过强转获得的日期并不是想要的，通过分析发现，正是由于默认时区导致结果相差了8个小时。查询语句： POST http://localhost:9200/_sql?formattext {&…...

编程日记 2023/12/8 7:17:14

KubeSphere 容器平台高可用：环境搭建与可视化操作指南

Linux_k8s篇欢迎来到Linux的世界，看笔记好好学多敲多打，每个人都是大神！ 题目：KubeSphere 容器平台高可用：环境搭建与可视化操作指南版本号: 1.0,0 作者: 老王要学习日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

编程新知 2026/2/9 18:19:34

脑机新手指南（八）：OpenBCI_GUI：从环境搭建到数据可视化（下）

一、数据处理与分析实战 （一）实时滤波与参数调整基础滤波操作 60Hz 工频滤波：勾选界面右侧 “60Hz” 复选框，可有效抑制电网干扰（适用于北美地区，欧洲用户可调整为 50Hz）。平滑处理&…...

编程新知 2025/11/19 22:56:53

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化之前初步学习prophet的时候，写过一篇简单实现，后期随着对该模型的深入研究，本次记录涉及到prophet 的公式以及参数调优，从公式可以更直观…...

编程新知 2026/1/27 5:01:54

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张（Windows/Linux）

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况，可以通过以下几种方式模拟或触发： 1. 增加CPU负载运行大量计算密集型任务，例如： 使用多线程循环执行复杂计算（如数学运算、加密解密等）。运行图…...

编程新知 2025/11/30 10:30:15

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪宝可梦GO游戏自组网系统

目录游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性宝可梦玩法融合设计游戏构想要素1. 地图探索（基于物理空间广播范围）2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法安全性设计技术选…...

编程新知 2025/12/12 6:01:17

佰力博科技与您探讨热释电测量的几种方法

热释电的测量主要涉及热释电系数的测定，这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中，积分电荷法最为常用，其原理是通过测量在电容器上积累的热释电电荷，从而确定热释电系数…...

编程新知 2026/1/23 11:53:19

短视频矩阵系统文案创作功能开发实践，定制化开发

在短视频行业迅猛发展的当下，企业和个人创作者为了扩大影响力、提升传播效果，纷纷采用短视频矩阵运营策略，同时管理多个平台、多个账号的内容发布。然而，频繁的文案创作需求让运营者疲于应对，如何高效产出高质量文案成…...

编程新知 2026/2/1 8:24:29

NPOI Excel用OLE对象的形式插入文件附件以及插入图片

static void Main(string[] args) {XlsWithObjData();Console.WriteLine("输出完成"); }static void XlsWithObjData() {// 创建工作簿和单元格,只有HSSFWorkbook,XSSFWorkbook不可以HSSFWorkbook workbook new HSSFWorkbook();HSSFSheet sheet (HSSFSheet)workboo…...

编程新知 2025/10/6 2:06:51