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

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

news 2026/1/2 17:27:51

文件上传

文件上传的方案：

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

前端实现

<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

TDengine 快速体验（Docker 镜像方式）

简介 TDengine 可以通过安装包、Docker 镜像及云服务快速体验 TDengine 的功能，本节首先介绍如何通过 Docker 快速体验 TDengine，然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker，请使用安装包的方式快…...

编程新知 2025/12/30 9:45:33

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类在 Nav2（Navigation2）的行为树框架中，行为树节点插件按照功能分为 Action（动作节点）、Condition（条件节点）、Control（控制节点）和 Decorator（装饰节点）四类。 1.1 动作节点 Action 执行具体的机器人操作或任务，直接与硬件、传感器或外部系统…...

编程新知 2025/12/21 5:00:07

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多，如何一步解决，采用 YOLOX 目标检测模式则可以轻松解决要在 YOLOX 中使用按目录分类的图片数据集（每个目录代表一个类别，目录下是该类别的所有图片），你需要进行以下配置步骤&#x…...

编程新知 2026/1/1 0:24:55

CRMEB 框架中 PHP 上传扩展开发：涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展扩展入口文件文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

编程新知 2025/12/30 22:56:56

Springboot社区养老保险系统小程序

一、前言随着我国经济迅速发展，人们对手机的需求越来越大，各种手机软件也都在被广泛应用，但是对于手机进行数据信息管理，对于手机的各种软件也是备受用户的喜爱，社区养老保险系统小程序被用户普遍使用，为方…...

编程新知 2025/12/31 11:29:23

管理学院权限管理系统开发总结

文章目录 🎓 管理学院权限管理系统开发总结 - 现代化Web应用实践之路📝 项目概述🏗️ 技术架构设计后端技术栈前端技术栈 💡 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 🗄️ 数据库设…...

编程新知 2025/10/23 14:10:35

中医有效性探讨

文章目录西医是如何发展到以生物化学为药理基础的现代医学？传统医学奠基期（远古 - 17 世纪）近代医学转型期（17 世纪 - 19 世纪末）现代医学成熟期（20世纪至今） 中医的源远流长和一脉相承远古至…...

编程新知 2025/12/31 14:28:57

JavaScript基础-API 和 Web API

在学习JavaScript的过程中，理解API（应用程序接口）和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能，使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...

编程新知 2025/8/21 23:03:46

【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制

使用 NginxLua 实现基于 IP 的访问频率限制在高并发场景下，限制某个 IP 的访问频率是非常重要的，可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案，使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...

编程新知 2025/10/22 6:06:44

CRMEB 中 PHP 短信扩展开发：涵盖一号通、阿里云、腾讯云、创蓝

目前已有一号通短信、阿里云短信、腾讯云短信扩展扩展入口文件文件目录 crmeb\services\sms\Sms.php 默认驱动类型为：一号通 namespace crmeb\services\sms;use crmeb\basic\BaseManager; use crmeb\services\AccessTokenServeService; use crmeb\services\sms\…...

编程新知 2025/10/5 5:38:24

文件上传

前端实现

nodejs端实现

文件流下载

nodejs端实现

相关文章：