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

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

news 2025/8/24 21:02:46

利用 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

龙虎榜——20250610

上证指数放量收阴线，个股多数下跌，盘中受消息影响大幅波动。深证指数放量收阴线形成顶分型，指数短线有调整的需求，大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技代表标的：御银股份、雄帝科技驱动…...

编程新知 2025/8/24 13:23:06

黑马Mybatis

Mybatis 表现层：页面展示业务层：逻辑处理持久层：持久数据化保存在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

编程新知 2025/8/22 3:04:35

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议（EPSFD 2025）将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会，EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

编程新知 2025/8/22 3:21:27

前端倒计时误差!

提示：记录工作中遇到的需求及解决办法文章目录前言一、误差从何而来？二、五大解决方案1. 动态校准法（基础版）2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言前几天听说公司某个项…...

编程新知 2025/7/13 22:34:29

LLM基础1_语言模型如何处理文本

基于GitHub项目：https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken：OpenAI开发的专业"分词器" torch：Facebook开发的强力计算引擎，相当于超级计算器理解词嵌入：给词语画"…...

编程新知 2025/7/21 10:28:02

网络编程（UDP编程）

思维导图 UDP基础编程（单播） 1.流程图服务器：短信的接收方创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

编程新知 2025/8/9 1:59:17

rnn判断string中第一次出现a的下标

# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写实现一个RNN网络完成多分类任务判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...

编程新知 2025/7/9 4:55:48

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户或 sudo 权限执行！ sudo su - 1. CentOS 系统： yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...

编程新知 2025/6/21 14:58:57

#Uniapp篇：chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器：Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

编程新知 2025/6/17 12:13:20

LRU 缓存机制详解与实现（Java版） + 力扣解决

📌 LRU 缓存机制详解与实现（Java版） 一、📖 问题背景在日常开发中，我们经常会使用缓存（Cache） 来提升性能。但由于内存有限，缓存不可能无限增长，于是需要策略决定&am…...

编程新知 2025/7/8 17:57:05

利用 FormData 实现文件上传

基础功能：上传文件

前端

基础功能：组装 FormData 和 XHR

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

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

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

后端

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

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

断点续传

Q & A

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

相关文章：