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

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

news 2026/4/9 22:00:24

文件上传

文件上传的方案：

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

前端实现

<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

Pebblebee Halo：追踪标签与个人安全的创新融合

兼具追踪与安全的多功能神器Pebblebee Halo 作为 Safe Haven 系列的首款产品，将追踪与个人安全功能完美融合。它不仅是一个传统的追踪标签，兼容 Apple 的 Find My 和 Google 的 Find Hub，能在地图上显示位置，蓝牙追踪范围在理想条…...

编程新知 2026/4/9 20:59:14

进程与线程的核心区别：一篇看懂，告别混淆

在编程学习中，尤其是接触 C 多线程、操作系统相关知识时，进程（Process）和线程（Thread）是两个绕不开的概念。很多新手会把二者混为一谈，甚至像之前我被问到的那样，疑惑“进程是不是线…...

编程新知 2026/4/9 20:29:55

告别复制粘贴！PDF-Parser-1.0实战：3步提取论文/报告/合同所有内容

告别复制粘贴！PDF-Parser-1.0实战：3步提取论文/报告/合同所有内容 1. 为什么你需要PDF-Parser-1.0？ 还在为PDF文档中的内容提取而烦恼吗？无论是学术论文中的复杂公式，财务报告里的精密表格，还是法律合同中…...

编程新知 2026/4/9 19:36:53

小白也能用的AI神器：Anything to RealCharacters 2.5D转真人引擎全流程体验

小白也能用的AI神器：Anything to RealCharacters 2.5D转真人引擎全流程体验 1. 从动漫到真人的神奇转换你是否曾经想过，把自己喜欢的动漫角色变成真实人物会是什么样子？或者想把游戏中的虚拟形象变成一张可以打印的照片？现在&a…...

编程新知 2026/4/9 19:16:46

隐写术工具技术指南：从原理到实践的完整探索

隐写术工具技术指南：从原理到实践的完整探索【免费下载链接】openstego OpenStego is a steganography application that provides two functionalities: a) Data Hiding: It can hide any data within an image file. b) Watermarking: Watermarking image files …...

编程新知 2026/4/9 19:00:44

Springboot 实现多数据源(PostgreSQL 和 SQL Server)连接父

一、环境准备 Free Spire.Doc for Python 是免费 Python 文档处理库，无需依赖 Microsoft Word，支持 Word 文档的创建、编辑、转换等操作，其中内置的 Markdown 解析能力，能高效实现 Markdown 到 Doc/Docx 格式的转换，且…...

编程新知 2026/4/9 18:40:34

如何3分钟完成Windows和Office批量激活：KMS_VL_ALL_AIO终极指南

如何3分钟完成Windows和Office批量激活：KMS_VL_ALL_AIO终极指南【免费下载链接】KMS_VL_ALL_AIO Smart Activation Script 项目地址: https://gitcode.com/gh_mirrors/km/KMS_VL_ALL_AIO 你是否曾因Windows系统弹出激活提示而烦恼？或者Office软件…...

编程新知 2026/4/9 17:34:00

像素剧本圣殿详细步骤：基于Qwen2.5-14B-Instruct的剧本张力增强微调方法

像素剧本圣殿详细步骤：基于Qwen2.5-14B-Instruct的剧本张力增强微调方法 1. 项目概述像素剧本圣殿(Pixel Script Temple)是一款专为剧本创作设计的AI辅助工具，基于Qwen2.5-14B-Instruct大模型深度微调而成。这个工具将先进的自然语言处理技术与复古像…...

编程新知 2026/4/9 16:41:56

蓝牙技术基础知识

文章目录概述1、Basic Rate －经典蓝牙2、Low Energy（LE）几个常用的蓝牙规范：A2DPProfile 汇总概述在网络上收集的一些资料，做一下汇总，方便自己查阅和学习。作为一种通用的无线通信技术，规范…...

编程新知 2026/4/9 16:15:47

企业级Mermaid与Confluence集成实战指南：从技术选型到价值落地

企业级Mermaid与Confluence集成实战指南：从技术选型到价值落地【免费下载链接】mermaid Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown 项目地址: https://gitcode.com/GitHub_Trending/me/mermaid …...

编程新知 2026/4/9 16:07:42

文件上传

前端实现

nodejs端实现

文件流下载

nodejs端实现

相关文章：