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

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

news 2025/7/8 4:00:33

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

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令&#xff1a; return <value>;在收到客户端连接后&#xff0c;立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量&#xff08;如 $time_iso8601、$remote_addr 等&#xff09;&a…...

编程新知 2025/7/6 9:09:42

Xshell远程连接Kali（默认 | 私钥）Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

编程新知 2025/7/8 0:34:21

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

编程新知 2025/6/17 17:52:51

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

编程新知 2025/7/4 14:40:43

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库&#xff0c;专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性&#xff0c;并提供了一个通用的框架&…...

编程新知 2025/6/16 13:45:11

Android第十三次面试总结（四大 组件基础）

Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成&#xff0c;用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机&#xff1a; ​onCreate()​​ ​调用时机​&#xff1a;Activity 首次创建时调用。​…...

编程新知 2025/6/21 16:37:38

Go 语言并发编程基础：无缓冲与有缓冲通道

在上一章节中&#xff0c;我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道&#xff0c;它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好&#xff0…...

编程新知 2025/6/21 5:00:15

GitFlow 工作模式（详解）

今天再学项目的过程中遇到使用gitflow模式管理代码&#xff0c;因此进行学习并且发布关于gitflow的一些思考 Git与GitFlow模式 我们在写代码的时候通常会进行网上保存&#xff0c;无论是github还是gittee&#xff0c;都是一种基于git去保存代码的形式&#xff0c;这样保存代码…...

编程新知 2025/7/7 10:39:24

【网络安全】开源系统getshell漏洞挖掘

审计过程&#xff1a; 在入口文件admin/index.php中&#xff1a; 用户可以通过m,c,a等参数控制加载的文件和方法&#xff0c;在app/system/entrance.php中存在重点代码&#xff1a; 当M_TYPE system并且M_MODULE include时&#xff0c;会设置常量PATH_OWN_FILE为PATH_APP.M_T…...

编程新知 2025/7/6 20:49:39

android13 app的触摸问题定位分析流程

一、知识点 一般来说，触摸问题都是app层面出问题，我们可以在ViewRootImpl.java添加log的方式定位；如果是touchableRegion的计算问题，就会相对比较麻烦了，需要通过adb shell dumpsys input > input.log指令，且通过打印堆栈的方式，逐步定位问题，并找到修改方案。 问题…...

编程新知 2025/7/7 11:42:35