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

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

news 2025/11/13 13:11:47

文件上传

文件上传的方案：

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

前端实现

<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

SciencePlots——绘制论文中的图片

文章目录安装一、风格二、1 资源安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源论文绘图神器来了：一行…...

编程新知 2025/9/8 13:50:07

【2025年】解决Burpsuite抓不到https包的问题

环境：windows11 burpsuite:2025.5 在抓取https网站时，burpsuite抓取不到https数据包，只显示： 解决该问题只需如下三个步骤： 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

编程新知 2025/11/8 6:29:42

Aspose.PDF 限制绕过方案：Java 字节码技术实战分享（仅供学习）

Aspose.PDF 限制绕过方案：Java 字节码技术实战分享（仅供学习） 一、Aspose.PDF 简介二、说明（⚠️仅供学习与研究使用）三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置五、字节码修改实现代码&#…...

编程新知 2025/11/12 11:31:59

【Go语言基础【13】】函数、闭包、方法

文章目录零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理二、函数类型与高阶函数1. 函数类型定义2. 高阶函数（函数作为参数、返回值） 三、匿名函数与闭包1. 匿名函数（Lambda函…...

编程新知 2025/9/12 8:21:45

并发编程 - go版

1.并发编程基础概念进程和线程 A. 进程是程序在操作系统中的一次执行过程，系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...

编程新知 2025/11/12 20:35:33

GO协程(Goroutine)问题总结

在使用Go语言来编写代码时，遇到的一些问题总结一下 [参考文档]：https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现： 今天在看到这个教程的时候，在自己的电…...

编程新知 2025/11/12 20:33:24