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

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

news 2025/9/21 14:01:35

文件上传

文件上传的方案：

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

前端实现

<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

浏览器访问 AWS ECS 上部署的 Docker 容器（监听 80 端口）

✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义（Task Definition&…...

编程新知 2025/9/20 7:32:32

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

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

编程新知 2025/9/21 5:14:32

VTK如何让部分单位不可见

最近遇到一个需求，需要让一个vtkDataSet中的部分单元不可见，查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行，是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示，主要是最后一个参数，透明度…...

编程新知 2025/9/3 21:03:21

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码：使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出：5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作在…...

编程新知 2025/7/20 9:15:14

EtherNet/IP转DeviceNet协议网关详解

一，设备主要功能疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络，本网关连接到EtherNet/IP总线中做为从站使用，连接到DeviceNet总线中做为从站使用。在自动…...

编程新知 2025/8/6 4:17:44

优选算法第十二讲：队列 + 宽搜优先级队列

优选算法第十二讲：队列宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...

编程新知 2025/9/7 8:51:06

Linux系统部署KES

1、安装准备 1.版本说明V008R006C009B0014 V008：是version产品的大版本。 R006：是release产品特性版本。 C009：是通用版 B0014：是build开发过程中的构建版本2.硬件要求 #安全版和企业版内存：1GB 以上硬盘&#xf…...

编程新知 2025/8/16 12:41:25

深度学习之模型压缩三驾马车：模型剪枝、模型量化、知识蒸馏

一、引言在深度学习中，我们训练出的神经网络往往非常庞大（比如像 ResNet、YOLOv8、Vision Transformer），虽然精度很高，但“太重”了，运行起来很慢，占用内存大，不适合部署到手机、摄…...

编程新知 2025/8/1 4:58:46

加密通信 + 行为分析：运营商行业安全防御体系重构

在数字经济蓬勃发展的时代，运营商作为信息通信网络的核心枢纽，承载着海量用户数据与关键业务传输，其安全防御体系的可靠性直接关乎国家安全、社会稳定与企业发展。随着网络攻击手段的不断升级，传统安全防护体系逐渐暴露出局限性&a…...

编程新知 2025/9/9 18:03:51

Vue3中的computer和watch

computed的写法在页面中 <div>{{ calcNumber }}</div>script中写法1 常用 import { computed, ref } from vue; let price ref(100);const priceAdd () > { //函数方法 price 1price.value ; }//计算属性 let calcNumber computed(() > {return ${p…...

编程新知 2025/9/13 4:12:41

文件上传

前端实现

nodejs端实现

文件流下载

nodejs端实现

相关文章：