nodejs如何添加html文件上传,通过nodejs实现文件的上传

2023-11-16

通过nodejs实现文件的上传

主要内容

本文将用来讲述如何通过nodejs进行文件上传,将会涉及到以下知识点:

通过express模块进行服务器的搭建

通过multer模块将上传的文件保存到指定目录

通过fs、path模块将文件改名,添加后缀

进行已上传文件的预览

思想

前端表单->后端接收文件本身->保存到服务器上->给数据库记录文件的一些信息->返回给nodejs相关信息->nodejs返回前端

注意:enctype必须得是multipart/form-data

实现

multer->文件名随机->fs模块改名->path模块解析磁盘路径

本文将上传图片为例,下面开始详细的设计:

将需要用到的相关模块下载引入

该模块可以通过npm下载,npm的下载以及相关操作这里就不再诉说了,不是重点

npm init -y

npm i express multer

引入模块

const express = require("express");

const path = require("path");

const fs = require("fs");

const multer = require("multer");

服务器搭建

接下来将模块导入,搭建服务,监听端口

const app=express();

app.listen(8083,"localhost",()=>{

console.log("监听8083端口成功");//监听成功执行的回调函数

})

multer实例化以及安装该中间件

let objMulter = multer({ dest: "./public/upload" });

//实例化multer,传递的参数对象,dest表示上传文件的存储路径

app.use(objMulter.any())//any表示任意类型的文件

// app.use(objMulter.image())//仅允许上传图片类型

静态资源托管

app.use(express.static("./public"));//将静态资源托管,这样才能在浏览器上直接访问预览图片或则html页面

新建接口获取发送过来的图片

通过打印req.files可知

fieldname: 表单name名

originalname: 上传的文件名

encoding: 编码方式

mimetype: 文件类型

buffer: 文件本身

size:尺寸

destination: 保存路径

filename: 保存后的文件名 不含后缀

path: 保存磁盘路径+保存后的文件名 不含后缀

app.post("/api/reg", (req, res) => {

let oldName = req.files[0].path;//获取名字

//给新名字加上原来的后缀

let newName = req.files[0].path + path.parse(req.files[0].originalname).ext;

fs.renameSync(oldName, newName);//改图片的名字

res.send({

err: 0,

url:

"http://localhost:8083/upload/" +

req.files[0].filename +

path.parse(req.files[0].originalname).ext//该图片的预览路径

});

});

通过postman软件上传图片检验

18bc47bdb6b92ca4700cea6ce5abeb08.png

aff085987154ab236fff5c4ec4a33634.png

以上就是通过nodejs,简单的图片文件上传流程,都是本人的学习记录,如有不对,欢迎指出~

まだね~

完整代码如下

const express = require("express");

const path = require("path");

const fs = require("fs");

const multer = require("multer");

const app = express();

app.listen(8083, "localhost", () => {

console.log("已经监听8083端口");

});

let objMulter = multer({ dest: "./public/upload" }); //实例化multer,传递的参数对象,dest表示上传文件的存储路径

app.use(objMulter.any()); //any表示任意类型的文件

// app.use(objMulter.image())//仅允许上传图片类型

app.use(express.static("./public"));

app.post("/api/reg", (req, res) => {

let oldName = req.files[0].path;

let newName = req.files[0].path + path.parse(req.files[0].originalname).ext;

fs.renameSync(oldName, newName);

res.send({

err: 0,

url:

"http://localhost:8083/upload/" +

req.files[0].filename +

path.parse(req.files[0].originalname).ext

});

});

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

nodejs如何添加html文件上传,通过nodejs实现文件的上传 的相关文章

  • 回调函数的作用

    回调函数的作用 原文地址 http wmnmtm blog 163 com blog static 3824571420105484116877 一直不太理解回调函数的作用 下面是找到的一些关于回调函数的作用的解答 1 回调函数是一个很有用
  • java正则表达式验证密码_java密码验证正则表达式校验

    正则表达式就是记录文本规则的代码 php密码验证正则表达式 8位长度限制 密码验证 password zongzi Abc oo13a2 n preg match all a zA Z d 8 password array 长度是8或更多
  • Spring中事件监听器

    Spring中事件监听器 概述 基本构成 Spring事件监听器应用 Spring中监听器流程和源码解析 概述 事件监听器是观察者模式的一个应用 当被观察的事件发生改变时需要通知该事件的订阅者针对这个事件做出对应行为 它将事件的发布和订阅进
  • MyBatisPlus之条件查询(常规查询、范围查询、模糊查询、null值处理等)

    MyBatisPlus之条件查询 MyBatisPlus之条件查询 1 设置查询条件 1 1 常规格式 1 2 链式编程格式 1 3 lambda格式1 1 4 lambda格式2 2 组合查询条件 2 1 并且 2 2 或者 3 条件查询
  • 项目难管理?先学会用好甘特图(内附操作方法及实用模板)

    先分享一些项目管理甘特图的模板 省事儿 高效 简单 再放制作教程 注 模板文中自取 部分Excel模板做成文件放在文末了 01 项目管理Excel套表 02 工程项目流程甘特图 03 项目管理甘特图表 模板指路 gt gt 工程项目管理模板
  • create-react-app中使用axios请求本地json文件

    在create react app创建react应用时 模拟本地请求静态json文件 必须把静态文件放到public下才可以请求到
  • appium+jenkins实例构建

    自动化测试平台 Jenkins简介 是一个开源软件项目 是基于java开发的一种持续集成工具 用于监控持续重复的工作 旨在提供一个开放易用的软件平台 使软件的持续集成变成可能 前面我们已经开完测试脚本 也使用bat 批处理来封装了启动App
  • P3369 【模板】普通平衡树【splay】

    题目链接 一个学习splay的链接 挺不错的哟 初识splay的时间里 总是会在各种各样的地方反着各种各样稀奇古怪的错误 好蒻 这次的错误是在pushup 的时候 我们更新其父节点的时候 不能直接使用 1 来做 而是要理解为什么是加上这个节
  • linux内核之无锁缓冲队列kfifo原理(结合项目实践)

    无锁缓冲队列kfifo 1 kfifo概述 2 kfifo功能描述 3 kfifo put与 kfifo get详解 4 kfifo get和kfifo put无锁并发操作 5 总结 6 项目使用介绍 7 其它 userspace 移植实现
  • Qt之QEvent

    简述 QEvent 类是所有事件类的基类 事件对象包含事件参数 Qt 的主事件循环 QCoreApplication exec 从事件队列中获取本地窗口系统事件 将它们转化为 QEvents 然后将转换后的事件发送给 QObjects 一般
  • 冠脉造影的医学背景知识

    1 冠脉造影读片技巧 医学界医生站
  • 内容:先有详细设计,还是先有接口文档?

    有朋友询问 对于一个项目来说是先写接口文档还是先设计表呢 有的人说 先写接口文档再慢慢完成表的设计 这样就可以避免由于太了解表了而导致对于返回的数据模型太受表的影响 针对这个问题 我们需要明确2个概念 并结合研发流程考虑信息依赖 才能更好地
  • avue dynamic动态子表单启用插槽slot功能的正确方式

    avue dynamic动态子表单启用插槽slot功能的正确方式 关于avue dynamic动态子表单 配置dynamic的children字段即可 内部组件为crud组件 大部分属性参考Crud文档 默认的type为curd 还可以配置
  • spring boot整合MySQL数据库

    spring boot整合MySQL数据库 spring boot整合MySQL数据库可以说很简单 只需要添加MySQL依赖和在配置文件中添加数据库配置信息 利用spring boot starter jdbc的JdbcTemplate即可
  • 集成算法——Adaboost代码

    集成算法是我们将不同的分类器组合起来 而这种组合结果就被称为集成方法或者是元算法 使用集成方法时会有多种形式 可以是不同算法的集成 也可以是同意算法在不同设置下的集成 还可以是数据集不同部分分配给不同分类器之后的集成 两种形式 baggin
  • 【总结】Markdown个人常用语法

    目录 输入 toc 按回车Enter Table of Contents TOC toc 标题 一级标题 二级标题 六级标题 段落 一个段落是由一个以上的连接的行句组成 一个以上的空行和Tab则会划分出不同的段落 一般的段落不需要用空白或换
  • GFPGAN源码分析—第十四篇

    项目总结 1 简述思想 本项目主要是利用预训练好的GAN生成器 StyleGAN 作为先验实现低质量人脸图片的修复 论文中提到 1 We leverage rich and diverse generative facial priors
  • vue中实现el-table点选和鼠标框选功能

    实现思路 项目有两个需求 既能在el table实现点选又能实现鼠标框选 一 点选实现思路 使用el table的cellClick方法 1 直接给点击的cell添加类名 cell classList add blue cell 然后把获取
  • golang 读取文件最后一行_测试用例是开发人员最后一块遮羞布

    最近一周写一个比较复杂的业务模块 越写到后面真心越心虚 操作越来越复杂了 代码也逐渐凌乱了起来 比如一个接口 传入的是一个比较复杂的大json 我需要解析这个大json 然后根据json中字段进行增删改查 调用第三方服务等操作 告诉前端接口

随机推荐

  • 微信支付配置流程

    微信支付配置流程 1 微信支付配置 微信公众号平台 gt 如果没有正式域名就要在安全中心配置白名单IP 2 微信公众号 微信公众号设置 gt 在功能设置里面的网页授权域名 3 商户号 产品中心 gt 开发配置 gt 配置jsApi支付页面的
  • vue3中a-table表格默认选中禁止选择

    效果 代码 使用row selection中的getCheckboxProps属性 其中preserveSelectedRowKeys属性设置为true 是为了表格切换页的时候 保留其他页面选中的数据 点击按钮 出现弹窗 const add
  • 深度学习:图像增强

    https blog csdn net zhangjunhit article details 79554140
  • Unity 使Text文本内容配合音频逐个显示并动态设置富文本

    在做一个项目时 需要Text文本内容逐个显示 并且配合音频的播放速度 当音频结束时 文本也显示完毕 而且给每一段文本设置不同的颜色和字号 代码如下 using System Collections using System Collecti
  • jenkins exec command 命令不执行

    本文记述的exec command 命令不执行情况是因为用户权限导致的 根据结果反馈就好像该设置不存在一样但是也没有报错 情况1 前端项目linux截图如下 图中1标志为jenkins所打的包 但是2标志是root账号的dist文件 因权限
  • plsql 登录后,提示数据库字符集(AL32UTF8)和客户端字符集(ZHS16GBK)不一致

    plsql 登录后提示 Database character set AL32UTF8 and Client character set ZHS16GBK are different Character set conversion may
  • Qt信号槽连接方式源码解读

    前言 Qt的五 四 种连接方式 在上一篇已经讲明 本篇主要分析在源码上是如何实现这几种连接方式的 本次源码为Qt 5 15 2 搞懂务必认真阅读最后添加注释后的代码 connect时会做什么 已知connect是可以实现一个信号连接多个槽的
  • ORT执行推理如何指定device编号

    法1 在执行推理前运行命令指定卡号 如 export CUDA VISIBLE DEVICES 1 python test py ox resnet50 16 fp32 说明 编号从0开始 通过上面的方式指定后 推理任务会在第2张卡中运行
  • window 服务器不稳定,服务器Windows系统突发情况的解决办法

    服务器Windows系统现在还是大部分的站长的选择 有很多用户是使用Windows作为网站服务器的系统 今天小编对于服务器Windows系统在维护过程中出现的几种突发情况 来讲讲解决办法 1 终端协议错误 如果用记事本或其他编辑器在远程终端
  • lambda 函数完美使用指南

    来源 萝卜大杂烩 今天我们来学习 Python 中的 lambda 函数 并探讨使用它的优点和局限性 什么是 Python 中的 Lambda 函数 lambda 函数是一个匿名函数 即 没有名称定义 它可以接受任意数量的参数 但与普通函数
  • 浅拷贝和深拷贝的区别

    浅拷贝 Shallow Copy 和深拷贝 Deep Copy 是两种复制对象的方式 它们之间的主要区别在于复制过程中是否会复制对象内部的引用类型数据 浅拷贝 Shallow Copy 浅拷贝仅复制了对象本身以及对象内部的基本数据类型 如i
  • 医学图像2D/3D可视化 ITK-SNAP软件使用

    软件下载链接 ITK SNAP Home 1 导入医学图像 nii gz文件 File gt Open Main Image 点击 Browse 切记不能有中文路径 gt Next 2 载入相应的分割图数据 nii gz文件 Segment
  • Android学习笔记——归纳整理

    目录 一 Android系统架构 二 Actvity相关 2 1基础相关 2 2 Intent相关 2 2 1 Intent的组成 2 2 2 显式Intent 2 2 3 隐式Intent 2 2 4 Intent属性 2 2 5 Int
  • Spring 单元测试中如何进行 mock

    我们在使用 Spring 开发项目时 都会用到依赖注入 如果程序依赖了外部系统或者不可控组件 比如依赖数据库 网络通信 文件系统等 我们在编写单元测试时 并不需要实际对外部系统进行操作 这时就要将被测试代码与外部系统进行解耦 而这种解耦方法
  • objects365数据集下载

    链接 https pan baidu com s 1QiWm8hCJus3LstZkz6Mzdw 提取码 wmrx
  • MySQL的索引和事务

    一 索引 一 索引概念 索引是一种特殊的文件 包含数据库中所有记录的引用 可以对表中的一列或多列创建索引 并指定索引的类型 存储引擎 每种索引在不同的存储引擎中的实现都有可能不同 索引类似数组的下标 通过下标拿到数组中的数据是很快的 同样通
  • 字符串右移n位

    题目 实现字符串右移几位 即 abcd 移两位变 cdab 思路 申请一个与待移位同样大小的数组 用来保存移位后的字符串 通过公式计算出简化的移位数 得到某字符移位后的新位置后 就将其字符值存放到新数组的对应位置 循环第3步 直至检测到字符
  • 【JVM】JVM基础知识:常量池、类加载、JVM内存模型、对象的创建过程

    前言 讲一下大概的内容 类加载 JVM内存模型 对象的创建 垃圾回收 JVM调优 入门 最近抽了时间学了一直都很想学的 JVM 之前也学过一点 也发布过一些零散的文章 但这篇文章会更加全面 学完这篇文章就足以应对有关 JVM 的面试 如果遇
  • java实现高斯赛德尔算法解线性方程组

    package linear equation import java util Scanner 使用高斯赛德尔迭代法求解线性方程组 public class Gauss Seidel Iterate 求下三角 private static
  • nodejs如何添加html文件上传,通过nodejs实现文件的上传

    通过nodejs实现文件的上传 主要内容 本文将用来讲述如何通过nodejs进行文件上传 将会涉及到以下知识点 通过express模块进行服务器的搭建 通过multer模块将上传的文件保存到指定目录 通过fs path模块将文件改名 添加后