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

学习node.js十三，文件的上传于下载

news 2026/2/10 23:56:22

文件上传

文件上传的方案：

大文件上传：将大文件切分成较小的片段（通常称为分片或块），然后逐个上传这些分片。这种方法可以提高上传的稳定性，因为如果某个分片上传失败，只需要重新上传该分片而不需要重新上传整个文件。同时，分片上传还可以利用多个网络连接并行上传多个分片，提高上传速度
断点续传：在上传过程中，如果网络中断或上传被中止，断点续传技术可以记录已成功上传的分片信息，以便在恢复上传时继续上传未完成的部分，而不需要重新上传整个文件。这种技术可以大大减少上传失败的影响，并节省时间和带宽。

前端实现

<head><meta charset="UTF-8"><title>Title</title><style>input {background-color: #f5f5f5;border: 1px solid #ccc;border-radius: 5px;cursor: pointer;outline: none;font-size: 14px;color: #333;text-align: center;line-height: 30px;font-size: 40px;}</style>
</head>
<body><!--  上传文件  --><input type="file" id="file" name="file" value="上传文件" />
</body>

第一步：获取元素，监听change事件。获取到文件的信息之后，利用file原型上面的 blob对象的slice方法来进行分割

// 获取文件,监听有无上传const file = document.getElementById('file');file.addEventListener('change', function (e) {// 获取文件信息const file = e.target.files[0];const chunks = sliceFile(file);uploadFile(chunks)})// 分片function sliceFile(file, chunkSize = 1024 * 1024 * 3) {let chunks = []for (let i = 0; i < file.size; i+= chunkSize) {chunks.push(file.slice(i, i + chunkSize))}return chunks}

第二步：将这些分片的文件片，编入编号和文件名后以formData的格式上传，并且将结果放入promise.all这个方法中，如果全部成功的化，那么就调用合并函数，将这个视频进行合并

// 上传function uploadFile(chunks) {let list = []for (let i = 0; i < chunks.length; i++) {let formData = new FormData();formData.append('index', i)formData.append('name', "wenjian")formData.append('file', chunks[i])list.push(fetch("http://localhost:8080/upload", {method: 'POST',body: formData}))}// 监听事件是否成功Promise.all(list).then(res => {// 发送合并请求fetch("http://localhost:8080/merge", {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({name: "ceshi.gif",})}).then(res => {console.log(res)}).catch(e => {console.log(e)})}).catch(e=> {console.log(e)})}

nodejs端实现

安装依赖

express 帮我们启动服务，并且提供接口
multer 读取文件，存储
cors 解决跨域

初始化 multer.diskStorage

destination 存储的目录
filename 存储的文件名（我是通过index-文件名存储的你也可以改）

// 1. 初始化multer
const storage = multer.diskStorage({destination:function (req,file,cb) {cb(null,'./upload')},filename:function (req,file,cb) {cb(null,`${req.body.index}-${req.body.name}`)}
})

放到接口上面，就可以将分完片的文件上传

// 2. 配置multer
const upload = multer({storage:storage})
// 3. 创建上传接口
app.post('/upload',upload.single('file'),(req,res) => {res.send('上传成功')
})

合并文件：先读取分片文件的文件名，然后把这些文件重新的进行排序，合成一个新的文件

完整代码：

import express from 'express'
import multer from 'multer'
import cors from 'cors'
import fs from 'node:fs'
import path from 'node:path'// 1. 初始化multer
const storage = multer.diskStorage({destination:function (req,file,cb) {cb(null,'./upload')},filename:function (req,file,cb) {cb(null,`${req.body.index}-${req.body.name}`)}
})
const app = express()
app.use(cors())
app.use(express.json())
// 2. 配置multer
const upload = multer({storage:storage})
// 3. 创建上传接口
app.post('/upload',upload.single('file'),(req,res) => {res.send('上传成功')
})
// 4. 合并文件
app.post("/merge",(req,res) => {if(!req.body.name) return res.send('文件名不能为空')let uploadDir = "./upload"// 读取分片文件let files = fs.readdirSync(path.join(process.cwd(), uploadDir))// 重新排序files = files.sort((a,b) => a.split('-')[0] - b.split('-')[0])// 合并文件let writeDir = path.join(process.cwd(),"./video",`${req.body.name}`)files.forEach(item => {fs.appendFileSync(writeDir,fs.readFileSync(path.join(process.cwd(),uploadDir,item)))fs.unlinkSync(path.join(process.cwd(),uploadDir,item))})res.send('合并成功')
})
app.listen(8080,() => console.log('Server is running on port 8080'))

文件流下载

文件流下载是一种通过将文件内容以流的形式发送给客户端，实现文件下载的方法。它适用于处理大型文件或需要实时生成文件内容的情况。

nodejs端实现

响应头

Content-Type 指定下载文件的 MIME 类型
- application/octet-stream（二进制流数据）
- application/pdf：Adobe PDF 文件。
- application/json：JSON 数据文件
- image/jpeg：JPEG 图像文件
Content-Disposition 指定服务器返回的内容在浏览器中的处理方式。它可以用于控制文件下载、内联显示或其他处理方式
- attachment：指示浏览器将响应内容作为附件下载。通常与 filename 参数一起使用，用于指定下载文件的名称
- inline：指示浏览器直接在浏览器窗口中打开响应内容，如果内容是可识别的文件类型（例如图片或 PDF），则在浏览器中内联显

代码实现：

import express from 'express'
import fs from 'fs'
import path from 'path'
import cors from 'cors'const app = express()
app.use(cors())
app.use(express.json())
app.use(express.static(path.join(process.cwd(),"static")))app.post("/upload", (req, res) => {let fileName = req.body.fileNameif(!fileName) return res.send({message: "File name is required"})let filePath = path.join(process.cwd(),"static", fileName)let readStream = fs.readFileSync(filePath)// 设置响应头res.setHeader('Content-Type', 'application/octet-stream')res.setHeader('Content-Disposition', 'attachment;filename=' + fileName)res.send(readStream)
})app.listen(3000,() => console.log('Server is running on port 3000'))

前端逻辑

前端核心逻辑就是接受的返回值是流的方式arrayBuffer,转成blob，生成下载链接，模拟a标签点击下载

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>input {background-color: #f5f5f5;border: 1px solid #ccc;border-radius: 5px;cursor: pointer;outline: none;font-size: 14px;color: #333;text-align: center;line-height: 30px;font-size: 40px;}</style>
</head>
<body><!--  上传文件  --><input type="button"  value="下载文件" />
</body>
<script>let btn = document.querySelector('input');btn.onclick = function () {fetch("http://localhost:3000/upload",{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({fileName:'1.png',})}).then(res => res.arrayBuffer()).then(res => {// 1. 转为bloblet blob = new Blob([res],{type:'image/png'})// 2. 创建a标签let a = document.createElement('a')// 4. 设置a标签的href属性为blob地址a.href = URL.createObjectURL(blob)// 3. 设置下载文件名a.download = '1.png'// 5. 模拟点击a标签a.click()// 6. 移除a标签a.remove()})}
</script>
</html>

学习node.js十三，文件的上传于下载

文件上传文件上传的方案： 大文件上传：将大文件切分成较小的片段（通常称为分片或块），然后逐个上传这些分片。这种方法可以提高上传的稳定性，因为如果某个分片上传失败，只需要重新上传该分片而…...

编程日记 2024/9/6 5:09:15

【刷题笔记】删除并获取最大点数粉刷房子

欢迎来到破晓的历程的博客 ⛺️不负时光，不负己✈️ 题目一题目链接：删除并获取最大点数思路： 预处理状态表示状态转移方程代码如下： class Solution { public:int deleteAndEarn(vector<int>& nums) {int N1…...

编程日记 2024/9/6 5:08:11

【Linux 从基础到进阶】Elasticsearch 搜索服务安装与调优

Elasticsearch 搜索服务安装与调优引言 Elasticsearch 是一个分布式的、基于 RESTful API 的搜索和分析引擎，专为快速处理大量数据而设计。它经常被用来进行全文搜索、日志和指标分析等操作。本文将介绍如何在 CentOS 和 Ubuntu 系统上安装 Elasticsearch，并进行必要的调优…...

编程日记 2024/9/6 5:00:57

IMU助力JAXA空间站机器人

近日，日本宇宙航空研究开发机构（JAXA）宣布，在国际空间站（ISS）实验舱“希望号”（Kibo）上部署的一款移动摄像机器人将采用Epson M-G370系列惯性测量单元（IMU）。…...

编程日记 2024/9/6 4:59:56

java开发，记录一些注解和架构

最近接了一个项目，说是项目其实也不算是项目，因为是把这个项目赛到其他项目中的。熟悉一些这个项目的功能，梳理了一下，在代码开发中主要关心pojo、entity、respository、controller、service。在这里主要记录前3个的流程与作用…...

编程日记 2024/9/6 4:57:54

【2024高教社杯全国大学生数学建模竞赛】B题生产过程中的决策问题——解题思路代码论文

目录问题 1：抽样检测方案的设计问题 2：生产过程中的决策问题 3：多工序、多零配件的生产决策问题 4：重新分析次品率题目难度分析1. 统计检测方案设计的复杂性（问题 1）2. 多阶段生产决策的复杂性&#xff08…...

编程日记 2024/9/6 4:56:53

JUnit 5和Mockito进行单元测试！

1. JUnit 5 基础 JUnit 5是最新的JUnit版本，它引入了许多新特性，包括更灵活的测试实例生命周期、参数化测试、更丰富的断言和假设等。 1.1 基本注解 Test：标记一个方法为测试方法。 BeforeEach：在每个测试方法之前执行。 AfterEac…...

编程日记 2024/9/6 4:54:48

LeetCode 算法：完全平方数 c++

原题链接🔗：完全平方数难度：中等⭐️⭐️ 题目给你一个整数 n ，返回和为 n 的完全平方数的最少数量。完全平方数是一个整数，其值等于另一个整数的平方；换句话说，其值等于一个整数自乘的…...

编程日记 2024/9/6 4:53:47

深入CSS 布局——WEB开发系列29

CSS 页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。一、正常布局流（Normal Flow） CSS的布局基础是“正常流”，也就是页面元素在没有特别指定布局方式时的默认排列…...

编程日记 2024/9/6 4:51:41

视频的容器格式和编码格式详解

视频的容器格式和编码格式是视频文件的两个核心概念，它们相互关联但具有不同的功能。以下是详细的解释： 1. 容器格式 (Container Format) 容器格式，又称封装格式，指的是视频文件的外壳或容器，它用于封装视频、音频、…...

编程日记 2024/9/6 4:50:40

Elasticsearch Mapping 详解

1 概述映射的基本概念 Mapping 也称之为映射，定义了 ES 的索引结构、字段类型、分词器等属性，是索引必不可少的组成部分。 ES 中的 mapping 有点类似与DB中“表结构”的概念，在 MySQL 中，表结构里包含了字段名称，字…...

编程日记 2024/9/6 4:48:38

WPF 利用视觉树获取指定名称对象、指定类型对象、以及判断是否有验证错误

1.利用视觉树获取指定名称对象 /// <summary> /// Finds a Child of a given item in the visual tree. /// </summary> /// <param name"parent">A direct parent of the queried item.</param> /// <typeparam name"T">T…...

编程日记 2024/9/6 4:47:36

了解`re`模块的`split()`, `sub()`, `subn()`方法的作用

在Python中，re模块（即正则表达式模块）提供了强大的字符串处理能力，允许你通过模式匹配来执行复杂的文本搜索、替换和分割等操作。其中，split(), sub(), 和 subn() 方法是re模块中非常实用的几个函数，它们各…...

编程日记 2024/9/6 4:46:34

机器学习交通流量预测实现方案

机器学习交通流量预测实现方案实现方案 1. 数据预处理 2. 模型选择 3. 模型训练与评估代码实现代码解释小结 🎈边走、边悟🎈迟早会好交通流量预测是机器学习在智能交通系统中的典型应用，通常用于预测道路上的车辆流量、速度和拥…...

编程日记 2024/9/6 4:45:33

QNN：基于QNN+example重构之后的yolov8det部署

QNN是高通发布的神经网络推理引擎，是SNPE的升级版，其主要功能是： 完成从Pytorch/TensorFlow/Keras/Onnx等神经网络框架到高通计算平台的模型转换； 完成模型的低比特量化（int8），使其能够运行在高…...

编程日记 2024/9/6 4:44:29

Redis实战宝典：开发规范与最佳实践

目录标题 Key命名设计：可读性、可管理性、简介性Value设计：拒绝大key控制Key的生命周期：设定过期时间时间复杂度为O(n)的命令需要注意N的数量禁用命令：KEYS、FLUSHDB、FLUSHALL等不推荐使用事务删除大key设置合理的内存淘汰策略使…...

编程日记 2024/9/6 4:43:28

RPC的实现原理架构

RPC（Remote Procedure Call，远程过程调用）是一种允许程序调用位于不同地址空间或网络上的函数或方法的技术，尽管这些调用看起来像是本地调用。RPC 的实现极大地简化了分布式系统中的通信，避免了开发人员直接处理底层网…...

编程日记 2024/9/6 4:41:23

OpenXR Monado Hello_xr提交Frame @src/tests/hello_xr/openxr_program.cpp RenderFrame())xrWaitFrame(m_session, &frameWaitInfo, &frameState)xrBeginFrame(m_session, &frameBeginInfo)std::vector<XrCompositionLayerBaseHeader*> layers;std::vecto…...

编程日记 2024/9/6 4:40:22

huggingface快速下载模型及其配置

大家知道，每次进huggingface里面一个个手动下载文件然后再上传到我们的服务器是很麻烦的。其实huggingface提供了下载整个包的命令，很简单，如下： 1. 进入huggingface官网，随便搜索一个模型，点击右上角的三…...

编程日记 2024/9/6 4:39:17

虚幻5|不同骨骼受到不同伤害|小知识（2）

1.蓝图创建一个结构，B_BoneDamage 结构里添加一个浮点变量，表示伤害倍数 2.当我们创建了一个结构，就需要创建一个数据表格，数据表格可以选择对应的结构不同骨骼不同倍数伤害，骨骼要对应骨骼网格体的名称 3.把我们br…...

编程日记 2024/9/6 4:37:06

深入剖析AI大模型：大模型时代的 Prompt 工程全解析

今天聊的内容，我认为是AI开发里面非常重要的内容。它在AI开发里无处不在，当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"，或者让翻译模型 "将这段合同翻译成商务日语" 时，输入的这句话就是 Prompt。…...

编程新知 2026/2/8 20:42:53

Spring Boot 实现流式响应（兼容 2.7.x）

在实际开发中，我们可能会遇到一些流式数据处理的场景，比如接收来自上游接口的 Server-Sent Events（SSE） 或流式 JSON 内容，并将其原样中转给前端页面或客户端。这种情况下，传统的 RestTemplate 缓存机制会…...

编程新知 2025/8/11 8:18:44

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时，需结合业务场景设计数据流转链路，重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点： 一、核心对接场景与目标商品数据同步场景：将1688商品信息…...

编程新知 2025/11/30 16:55:32

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码注：文档 https://developers.weixin.qq…...

编程新知 2026/1/29 8:41:55

（二）原型模式

原型的功能是将一个已经存在的对象作为源目标，其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。一、源型模式的定义原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现，忽略对象创建过程中的其它细节。 📌 核心特点：避免重复初…...

编程新知 2026/2/10 15:49:06

从零开始打造 OpenSTLinux 6.6 Yocto 系统（基于STM32CubeMX）（九）

设备树移植和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下源码修改及编译修改arch/arm/boot/dts/st/Makefile，新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

编程新知 2026/2/5 12:11:18

【JavaWeb】Docker项目部署

引言之前学习了Linux操作系统的常见命令，在Linux上安装软件，以及如何在Linux上部署一个单体项目，大多数同学都会有相同的感受，那就是麻烦。核心体现在三点： 命令太多了，记不住软件安装包名字复杂&…...

编程新知 2026/2/4 16:07:02

Redis数据倾斜问题解决

Redis 数据倾斜问题解析与解决方案什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中，部分节点存储的数据量或访问量远高于其他节点，导致这些节点负载过高，影响整体性能。数据倾斜的主要表现部分节点内存使用率远高于其他节…...

编程新知 2026/1/27 19:28:11

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系，以下是深入解析： 门铃FIFO溢出的本质在RapidIO系统中，门铃消息FIFO是硬件控制器内部的缓冲区，用于临时存储接收到的门铃消息（Doorbell Message）。…...

编程新知 2026/1/7 1:29:19

Spring是如何解决Bean的循环依赖：三级缓存机制

1、什么是 Bean 的循环依赖在 Spring框架中，Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌，形成闭环依赖关系的现象。多个 Bean 的依赖关系构成环形链路，例如：双向依赖：Bean A 依赖 Bean B，同时 Bean B 也依赖 Bean A（A↔B）。链条循环： Bean A → Bean…...

编程新知 2025/7/25 1:21:53

文件上传

前端实现

nodejs端实现

文件流下载

nodejs端实现

相关文章：