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

使用Node.js实现单文件上传功能—含代码解释

news 文章来源：https://blog.csdn.net/2301_78675670/article/details/142029681 2025/5/14 23:27:54

1、概念

  1. 文件上传的具体内容
    • 在前端让用户发送(上传)图片，图片由后端(服务器)接收，并转存到到服务端设备上的操作
    • node.js的文件上传功能主要是使用：multer 插件实现的
  2. 搭建一个图片上传的接口
    • 先让接口开通，再去做插件下载/配置等操作
    • 我们确定请求路径是：http://localhost:3000/upload后，也就确定了可以访问得到响应数据
  3. 阅读multer文档
    • 文档: multer中文文档
  4. 使用multer插件
    • 下载插件：npm i multer
  5. 注意
    • 测试接口的时候，需要前端 来完成接口的请求发送
    • 浏览器直接发起请求这个事行不通，因为浏览器地址栏只能发起get请求 ，但是我们现在使用的请求方式是post请求

2、示例—核心代码

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');var app = express();// view engine setup
app.set('views', path.join(__dirname, 'views'));app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));// 把路由表直接挂在到app上 
// 这种路径引入表示直接引入 routes/index.js 
let routes = require("./routes");
app.use( routes );// catch 404 and forward to error handler
app.use(function(req, res, next) {next(createError(404));
});// error handler
app.use(function(err, req, res, next) {// set locals, only providing error in developmentres.locals.message = err.message;res.locals.error = req.app.get('env') === 'development' ? err : {};// render the error pageres.status(err.status || 500);res.render('error');
});module.exports = app;

3、示例—index

let router = require("express").Router();
let test = require("./test");// 挂载路由
router.use( "/test" , test )
// 注意：这里的用法是用的简写 => 本来是用变量接收引入的upload，在放置在全局路由中的
router.use("/upload" , require("./upload"));// 暴露路由对象
module.exports = router;

4、示例—upload(单文件上传子路由)

图片上传路由 => 先测试路由通不通：添加一个get("/") 路由测试即可// 1、引入multer插件及express服务器框架let router = require("express").Router();let multer = require("multer");
// 测试路由是否通了router.get("/" , ( req , res )=>{res.send("upload功能路由!");})// 3、配置multer中间件 => 创建一个中间价实例// 3.1、配置单文件的中间件，并设置配置项：配置上传图片的存储位置 => 放在uploads(叫啥随意)这个文件夹中// 1）创建了一个 multer 中间件实例，用于处理文件上传。// 2）dest: "uploads/" 表示上传的文件将被保存到服务器的 "uploads" 目录中。// 3）upload 是这个中间件实例的变量名，你可以在后续的路由中使用它来处理文件上传let upload = multer( { dest : "uploads/"} )  // 5、编写处理响应的中间件function handlerRes( req , res ){// 5.1）图片上传结束后，会有一些图片的信息，这些图片的信息都放在了req对象中，我们可以在single中间件处理结束后使用这些数据 // 5.2）信息分别有：req.file => 图片存储文件夹，以及req.body：文本域数据 => 几乎不用 //! 注意：这些信息是阅读文档的说明得知的 let data = {code : 1 ,file : req.file , body : req.body }// 5.3）返回响应数据res.json(data)}
// 4、使用中间件完成图片上传的功能配置 => get能上传的数据太小了，所以这里使用post比较合适// 1）语法：upload.single => 单图片上传的中间件// 2）参数：upload.single("图片字段")// 3）解释：用post请求profile接口，把图片数据按照正确的格式上传，由upload...中间价处理图片，结束后它会调用 handlerRes router.post("/profile" , upload.single("avatar") ,handlerRes )// 2、暴露路由对象module.exports = router;

5、示例—前端文件上传页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文件上传页面</title>
</head>
<body><h2>文件上传</h2><!-- 使用form表单传递图片 => 注意：enctype="multipart/form-data"属性必须携带，不带的话不能携带图片上传 --><form action="/upload/profile" method="post" enctype="multipart/form-data" ><!-- 添加图片的上传容器： 1）我们在服务端规定了图片上传字段，所以我们要给input添加name属性 => upload中的upload.single("avatar")2）name属性的值就是服务端定义的字段值 --><input type="file" name="avatar"><button>提交图片</button>流程：1）当提交按钮被点击时，请求就会向/upload/profile发送，并用post请求携带enctype...属性，2）name中的字段是avatar，字段里的数据我们上传的图片数据注意：一定是在http://localhost:3000/这个服务器路径下打开的，/upload/profile是表示在http://localhost:3000直接拼接的</form>
</body>
</html>

相关文章：

使用Node.js实现单文件上传功能—含代码解释

1、概念 文件上传的具体内容 在前端让用户发送(上传)图片&#xff0c;图片由后端(服务器)接收&#xff0c;并转存到到服务端设备上的操作node.js的文件上传功能主要是使用&#xff1a;multer 插件实现的 搭建一个图片上传的接口 先让接口开通&#xff0c;再去做插件下载/配置等…...

编程日记 2024/9/8 18:52:29

【机器人工具箱Robotics Toolbox开发笔记（一）】Matlab机器人工具箱简介

MATLAB是一款被广泛应用于科学计算和工程领域的专业软件。它的全称为Matrix Laboratory&#xff08;矩阵实验室&#xff09;&#xff0c;因为其最基本的数据类型就是矢量与矩阵&#xff0c;所以在处理数学和科学问题时非常方便&#xff0c;可用于线性代数计算、图形和动态仿真的…...

编程日记 2024/9/8 18:48:26

基于 Metropolis 的朗之万算法

基于 Metropolis 的朗之万算法 1. 未经调整的朗之万算法2. 基于 Metropolis 的朗之万算法 (MALA)2.1. MH算法2.2. 基于 Metropolis 的朗之万算法 (MALA) 3. Metropolis 调整的朗之万截断算法&#xff08;MALTA&#xff09; 1. 未经调整的朗之万算法 未调整的朗之万算法 (ULA) 是…...

编程日记 2024/9/8 18:45:23

SAM2POINT：以zero-shot且快速的方式将任何 3D 视频分割为视频

摘要 我们介绍 SAM2POINT&#xff0c;这是一种采用 Segment Anything Model 2 (SAM 2) 进行零样本和快速 3D 分割的初步探索。 SAM2POINT 将任何 3D 数据解释为一系列多向视频&#xff0c;并利用 SAM 2 进行 3D 空间分割&#xff0c;无需进一步训练或 2D-3D 投影。 我们的框架…...

编程日记 2024/9/8 18:42:21

深入理解FastAPI的response_model：自动化数据验证与文档生成

使用 FastAPI 的 response_model 参数 在构建 RESTful API 时&#xff0c;确保数据的一致性和正确性是非常重要的。FastAPI 提供了强大的工具来帮助开发者实现这一目标。其中一个关键特性是 response_model 参数&#xff0c;它允许开发者定义期望的响应格式&#xff0c;并自动…...

编程日记 2024/9/8 18:40:19

【数据结构与算法 | 灵神题单 | 删除链表篇】力扣3217, 82， 237

总结&#xff0c;删除链表节点问题使用到列表&#xff0c;哈希表&#xff0c;递归比较容易超时&#xff0c;我觉得使用计数排序比较稳&#xff0c;处理起来也不是很难。 1. 力扣3217&#xff1a;从链表中移除在数组中的节点 1.1 题目&#xff1a; 给你一个整数数组 nums 和一…...

编程日记 2024/9/8 18:36:16

快速失败 (fail-fast) 和安全失败 (fail-safe)

1. 定义与工作原理 1.1 快速失败&#xff08;Fail-Fast&#xff09; 定义&#xff1a; 快速失败是一种系统设计原则&#xff0c;当系统遇到异常情况或错误时&#xff0c;立即停止执行并返回错误&#xff0c;而不是试图继续执行或处理潜在的问题。快速失败系统会主动检测系统中…...

编程日记 2024/9/8 18:35:15

【MySQL】MySQL中表的增删改查——（基础篇）（超详解）

前言&#xff1a; &#x1f31f;&#x1f31f;本期讲解关于MySQL中CDUD的基础操作&#xff0c;希望能帮到屏幕前的你。 &#x1f308;上期博客在这里&#xff1a;http://t.csdnimg.cn/fNldO &#x1f308;感兴趣的小伙伴看一看小编主页&#xff1a;GGBondlctrl-CSDN博客 目录 …...

编程日记 2024/9/8 18:32:12

【B题第二套完整论文已出】2024数模国赛B题第二套完整论文+可运行代码参考（无偿分享）

2024数模国赛B题完整论文 摘要&#xff1a; 随着电子产品制造业的快速发展&#xff0c;质量控制与成本优化问题成为生产过程中亟待解决的核心挑战。为应对生产环节中的质量不确定性及成本控制需求&#xff0c;本文结合抽样检测理论和成本效益分析&#xff0c;通过构建数学模型…...

编程日记 2024/9/8 18:31:11

大数据之Flink（四）

11、水位线 11.1、水位线概念 一般实时流处理场景中&#xff0c;事件时间基本与处理时间保持同步&#xff0c;可能会略微延迟。 flink中用来衡量事件时间进展的标记就是水位线&#xff08;WaterMark&#xff09;。水位线可以看作一条特殊的数据记录&#xff0c;它是插入到数…...

编程日记 2024/9/8 18:30:11

《Web性能权威指南》-网络技术概览-读书笔记

注&#xff1a;TCP/IP等知识牵涉面太广&#xff0c;且不说本文&#xff0c;哪怕是原书&#xff0c;限于篇幅&#xff0c;很多知识点都是大致介绍下。如果想深入理解&#xff0c;需要更一步Google相关页面资料。 延迟与带宽 WPO&#xff0c;Web Performance Optimization&…...

编程日记 2024/9/8 18:28:09

最新版php进销存系统源码 ERP进销存专业化管理 永久免费升级更新+完整图文搭建教程

在当今信息化时代&#xff0c;企业管理的高效性与精确性是企业竞争力的关键。分享一款最新版的PHP进销存系统源码&#xff0c;一款专为企业设计的ERP进销存管理工具&#xff0c;其丰富的功能、灵活的子账号设置、强大的权限控制、以及独家升级的合同管理和报价单打印功能&#…...

编程日记 2024/9/8 18:27:08

【高效办公】三、两台电脑共享鼠标、键盘和文件，两台电脑当一个用的神操作！barrier

1.下载 ubuntu:sudo apt install barrierwindows:https://github.com/debauchee/barrier/releases-下载 : 2.4.0-Assets-BarrierSetup-2.4.0-release.exe 2.运行 ubuntu:sudo apt install barrierwindows:https://github.com/debauchee/barrier/releases-下载 : 2.4.0-Asset…...

编程日记 2024/9/8 18:25:06

智能合约系统DAPP开发

智能合约系统DAPP&#xff08;去中心化应用&#xff09;的开发是一个复杂且综合性的过程&#xff0c;它结合了区块链技术、智能合约编程、前端开发以及安全性等多方面的知识和技能。以下是对智能合约系统DAPP开发过程的详细概述&#xff1a; 一、需求分析 明确应用场景&#xf…...

编程日记 2024/9/8 18:24:05

宠物狗检测-目标检测数据集（包括VOC格式、YOLO格式）

宠物狗检测-目标检测数据集&#xff08;包括VOC格式、YOLO格式&#xff09; 数据集&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1roegkaGAURWUVRR-D7OzzA?pwddxv6 提取码&#xff1a;dxv6 数据集信息介绍&#xff1a; 共有20580 张图像和一一对应的标注文件 标…...

编程日记 2024/9/8 18:22:03

2.5多任务示例编程2

1.CUBEMX配置 2.代码 void StartADC(void const * argument) {/* USER CODE BEGIN StartADC */TickType_t pxPreviousWakeTimexTaskGetTickCount();/* Infinite loop */for(;;){HAL_ADC_Start(&hadc1);if(HAL_ADC_PollForConversion(&hadc1,100)HAL_OK){uint32_t valu…...

编程日记 2024/9/8 18:19:00

JavaWeb - 4 - Vue Ajax

一.Vue Vue Vue是一套前端框架&#xff0c;免除原生JavaScript中的DOM操作&#xff0c;简化书写 基于MVVM&#xff08;Model-VIew-ViewModel&#xff09;思想&#xff0c;实现数据的双向绑定&#xff0c;将编程的关注点放在数据上 官网&#xff1a;https://cn.vuejs.org…...

编程日记 2024/9/8 18:17:59

深入掌握Go语言中的正则表达式与字符串处理

Go语言中的正则表达式与模式匹配 在编程中&#xff0c;字符串处理是常见的需求之一&#xff0c;而正则表达式则是一个强大的工具&#xff0c;能够帮助我们实现复杂的字符串匹配、提取和替换功能。Go语言内置了对正则表达式的支持&#xff0c;通过regexp包&#xff0c;我们可以…...

编程日记 2024/9/8 18:16:58

Docker进入容器运行命令

Docker进入容器运行命令 1. **使用 docker exec 进入容器并运行命令**语法&#xff1a;示例 1&#xff1a;进入容器并启动交互式 Bash 终端示例 2&#xff1a;在容器中运行单个命令 2. **使用 docker attach 进入容器**3. **使用 docker run 启动新容器并运行命令**4. **使用 d…...

编程日记 2024/9/8 18:15:58

[数据集][目标检测]机油泄漏检测数据集VOC+YOLO格式43张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;43 标注数量(xml文件个数)&#xff1a;43 标注数量(txt文件个数)&#xff1a;43 标注类别数…...

编程日记 2024/9/8 18:14:57

Python实现读取Excel数据详细教学版

Python实现读取Excel数据详细教学版 在处理数据和进行数据分析时&#xff0c;Excel文件是常见的数据载体。通过Python读取Excel数据&#xff0c;可以方便地对数据进行进一步的处理和分析。以下将详细介绍使用Python读取Excel数据的方法和相关库的使用&#xff0c;并提供具体代…...

编程日记 2024/9/8 18:10:53

【HarmonyOS】- 内存优化

文章目录 知识回顾前言源码分析1. onMemoryLevel2. 使用LRUCache优化ArkTS内存原理介绍3. 使用生命周期管理优化ArkTS内存4. 使用purgeable优化C++内存拓展知识1. Purgeable Memory总结知识回顾 前言 当应用程序占用过多内存时，系统可能会频繁进行内存回收和重新分配，导致应…...

编程日记 2024/9/8 18:09:52

【生日视频制作】保时捷车主提车交车仪式感AE模板修改文字软件生成器教程特效素材【AE模板】

生日视频制作教程保时捷车主提车交车仪式感AE模板修改文字特效广告生成神器素材祝福玩法AE模板工程 怎么如何做的【生日视频制作】保时捷车主提车交车仪式感AE模板修改文字软件生成器教程特效素材【AE模板】 生日视频制作步骤&#xff1a; 下载AE模板 安装AE软件 把AE模板导入…...

编程日记 2024/9/8 18:07:51

【自用14】C++俄罗斯方块-思路复盘3

在上篇降落函数中使用到了判断游戏是否结束的功能&#xff0c;因此这篇先从判断游戏是否结束开始 判断游戏是否结束 void failCheck(void){if(!moveable(START_X,START_Y,MOVE_DOWN,BLOCK_UP)){setcolor(WHITE);setfont(45,0,_T("隶体"));outtextxy(75,300,_T(&quo…...

编程日记 2024/9/8 18:04:48

ElasticSearch的DSL查询⑤（ES数据聚合、DSL语法数据聚合、RestClient数据聚合）

目录 一、数据聚合 1.1 DSL实现聚合 1.1.1 Bucket聚合 1.1.2 带条件聚合 1.1.3 Metric聚合 1.1.4 总结 2.1 RestClient实现聚合 2.1.1 Bucket聚合 2.1.2 带条件聚合 2.2.3 Metric聚合 一、数据聚合 聚合&#xff08;aggregations&#xff09;可以让我们极其方便的实…...

编程日记 2024/9/8 18:03:47

DBeaver 24.0 高阶用法

DBeaver 24.0 高阶用法 文章目录 DBeaver 24.0 高阶用法DBeaver 介绍功能一、元数据搜索功能二、仪表盘显示功能三、ER图功能四、导出数据最后 DBeaver 介绍 DBeaver 确实是一款功能强大的通用数据库管理工具&#xff0c;适合所有需要以专业方式处理数据的用户。它不仅提供了直…...

编程日记 2024/9/8 18:01:11

外卖会员卡项目骗局揭秘，你还在做梦吗？改醒醒了

大家好&#xff0c;我是鲸天科技千千&#xff0c;大家都知道我是做开发的&#xff0c;做互联网行业很多年了&#xff0c;平时会在这里给大家分享一些互联网相关的小技巧和小项目&#xff0c;感兴趣的给我点个关注。 关于外卖会员卡这个项目的一些骗局和套路&#xff0c;我真的…...

编程日记 2024/9/8 17:57:22

比较顺序3s1，3s2，4s1之间的关系

(A,B)---6*30*2---(0,1)(1,0) 分类A和B&#xff0c;让B全是0。当收敛误差为7e-4&#xff0c;收敛199次取迭代次数平均值&#xff0c;3s1为 3s2为 4s1为 3s1&#xff0c;3s2&#xff0c;4s1这3个顺序之间是否有什么联系 &#xff0c; 因为4s1可以按照结构加法 变换成与4s1内在…...

编程日记 2024/9/8 17:56:20

BUUCTF靶场[web][极客大挑战 2019]Http、[HCTF 2018]admin

目录 [web][极客大挑战 2019]Http 考点&#xff1a;Referer协议、UA协议、X-Forwarded-For协议 [web][HCTF 2018]admin 考点&#xff1a;弱密码字典爆破 四种方法&#xff1a; [web][极客大挑战 2019]Http 考点&#xff1a;Referer协议、UA协议、X-Forwarded-For协议 访问…...

编程日记 2024/9/8 17:54:18

数据库锁之行级锁、记录锁、间隙锁和临键锁

1. 行级锁 InnoDB 引擎支持行级锁&#xff0c;而MyISAM 引擎不支持行级锁&#xff0c;只支持表级锁。行级锁是基于索引实现的。 对于普通的select语句&#xff0c;是不会加记录锁的&#xff0c;因为它属于快照读&#xff0c;通过在MVCC中的undo log版本链实现。如果要在查询时对…...

编程日记 2024/9/8 17:53:17