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

node 文件上传操作(前端 form表单上传 formData上传 后端 node 使用express+multer)

news 2026/4/3 0:29:12

目录

  • 前端
    • form表单上传
    • formData上传
  • 后端 node 使用express+multer

前端

form表单上传

 <h1>个人信息</h1><form action="http://localhost:3000/api/sendFile" method="post" enctype="multipart/form-data"><label for="name">姓名：</label><input type="text" name="name" id="name"><br><br><label for="email">电子邮件地址：</label><input type="email" name="email" id="email"><br><br><label for="avatar">头像：</label><input type="file" name="avatar" id="avatar" multiple><br><br><label for="pic">喜欢：</label><input type="file" name="pic" id="pic" multiple><br><br><input type="button" value="保存" id="save"></form>

formData上传

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><h1>个人信息</h1><!-- <form action="http://localhost:3000/api/sendFile" method="post" enctype="multipart/form-data"> --><label for="name">姓名：</label><input type="text" name="name" id="name"><br><br><label for="email">电子邮件地址：</label><input type="email" name="email" id="email"><br><br><label for="avatar">头像：</label><input type="file" name="avatar" id="avatar" multiple><br><br><label for="pic">喜欢：</label><input type="file" name="pic" id="pic" multiple><br><br><input type="button" value="保存" id="save"><!-- </form> --><script>var username = document.getElementById("name")var email = document.getElementById("email")var avatar = document.getElementById("avatar")var pic = document.getElementById("pic")var save = document.getElementById("save")save.onclick = function () {var formdata = new FormData()formdata.append("name", username.value)console.log(username,username.value);formdata.append("email", email.value)for (let i = 0; i < avatar.files.length; i++) {formdata.append("avatar", avatar.files[i])}console.log(formdata);for (let i = 0; i < pic.files.length; i++) {formdata.append("pic", pic.files[i])}console.log(formdata.getAll("name"))console.log(formdata.getAll("email"))console.log(formdata.getAll("avatar"))console.log(formdata.getAll("pic"))let ajax = new XMLHttpRequest()ajax.open("POST", 'http://localhost:3000/api/sendFile')ajax.send(formdata)ajax.onreadystatechange = function () {if (ajax.status == 200) {console.log(ajax.responseText);}}}</script>
</body></html>

后端 node 使用express+multer

const express = require('express')
const fs = require('fs')
const app = express()
const port = 3000
const multer = require('multer')
//使用中间件
// app.use(express.static(`${__dirname}/web`))
let storage= multer.diskStorage({destination:function(req,file,cb){cb(null,`${__dirname}/uploadfiles`)},filename:function(req,file,cb){cb(null,file.originalname)}
})
let upload =multer({storage:storage})
app.get('/', (req, res) => {//返回一个首页fs.readFile(`${__dirname}/web/sendFile.html`,(err,data)=>{if (err) throw errres.append('Content-Type', 'text/html')res.send(data)})
})// 搭建文件上传的服务
//单文件 upload.single("avatar")
//多文件 upload.single("avatar")
//多个上传upload.fields([{name:"avatar",maxCount:20},{name:"pic",maxCount:20}])
//没有文件上传upload.none()
app.post('/api/sendFile', upload.fields([{name:"avatar",maxCount:20},
{name:"pic",maxCount:20}
]),(req, res) => {//返回一个首页console.log(req.body);console.log(req.file);console.log(req.files);res.send("ok")
})app.listen(port, () => console.log(`Example app listening on port ${port}!`))

相关文章：

node 文件上传操作(前端 form表单上传 formData上传 后端 node 使用express+multer)

目录 前端form表单上传formData上传 后端 node 使用expressmulter 前端 form表单上传 <h1>个人信息</h1><form action"http://localhost:3000/api/sendFile" method"post" enctype"multipart/form-data"><label for"…...

编程日记 2023/11/14 11:00:57

容器数据卷+MYSQL实战

什么是容器数据卷&#xff1f; 让我们回忆一下docker理念&#xff1a; 就是将应用和环境打包成一个镜像 数据&#xff1f; 如果数据都在容器中&#xff0c;那么我们删除容器&#xff0c;数据就会丢失 &#xff01;需求&#xff1a;数据持久化就完美了 对于MYSQL&#xff0…...

编程日记 2023/11/14 10:59:56

开发者测试2023省赛--UnrolledLinkedList测试用例

测试结果 官方提交结果 EclEmma PITest 被测文件UnrolledLinkedList.java /** This source code is placed in the public domain. This means you can use it* without any restrictions.*/package net.mooctest;import java.util.AbstractList; import java.util.Collectio…...

编程日记 2023/11/14 10:58:55

HoudahGeo 6 for Mac：掌控地理位置信息的强大工具

在当今这个信息化的世界&#xff0c;地理位置信息的重要性日益凸显。无论是在工作、学习还是生活中&#xff0c;我们都需要理解和利用地理位置信息。如果你正在寻找一个能帮助你更好地管理和理解地理位置信息的工具&#xff0c;那么HoudahGeo 6 for Mac是一个值得考虑的选择。 …...

编程日记 2023/11/14 10:57:54

Xilinx Artix7-100T低端FPGA解码MIPI视频，基于MIPI CSI-2 RX Subsystem架构实现，提供工程源码和技术支持

目录 1、前言免责声明 2、我这里已有的 MIPI 编解码方案3、本 MIPI CSI2 模块性能及其优缺点4、详细设计方案设计原理框图OV5640及其配置权电阻硬件方案MIPI CSI-2 RX SubsystemSensor Demosaic图像格式转换Gammer LUT伽马校正VDMA图像缓存AXI4-Stream toVideo OutHDMI输出 5、…...

编程日记 2023/11/14 10:56:53

C与汇编深入分析

汇编怎么调用C函数 直接调用 BL main传参数 在arm中有个ATPCS规则&#xff08;ARM-THUMB procedure call standard&#xff09;&#xff08;ARM-Thumb过程调用标准&#xff09;。 约定r0-r15寄存器的用途&#xff1a; r0-r3&#xff1a;调用者和被调用者之间传递参数r4-r11…...

编程日记 2023/11/14 10:55:52

MySQL中外键的使用及外键约束策略

一、外键约束的概念 外键约束&#xff08;FOREIGN KEY,缩写FK是数据库设计的一个概念&#xff0c;它确保在两个表之间的关系保持数据的一致性和完整性。 外键是指表中的某个字段的依赖于另一张表中某个字段的值&#xff0c;而被依赖的字段必须具有主键约束或者唯一约束&#…...

编程日记 2023/11/14 10:54:49

Home Assistant使用ios主题更换背景

Home Assistant使用ios主题、更换背景 lovelace-ios-dark-mode-theme 默认前置情况&#xff0c;1、已安转HACS插件2、搜索安装 IOS Dark Mode Theme1&#xff09;第一、二步应该很容易实现&#xff0c;configuration.yaml文件很容易被找到2&#xff09;而本人在进行第三步操作时…...

编程日记 2023/11/14 10:53:48

深入了解鼠标光标的设置过程

有一位读者问了这样一个问题&#xff1a; “为什么鼠标光标的设定绑定在窗口类&#xff0c;而不是窗口上&#xff1f;” 这个问题隐含地假设了光标与窗口类相关联。虽然每个窗口类都有一个关联的光标&#xff0c;但决定使用哪个光标的是窗口。 光标设置过程在 WM_SETCURSOR 消…...

编程日记 2023/11/14 10:52:47

数据结构-散列表

列表&#xff08;Hash Table&#xff09;&#xff0c;又称哈希表&#xff0c;是一种数据结构&#xff0c;特点是&#xff1a;数据元素的关键字与其存储地址直接相关 例&#xff1a;有一堆数据元素&#xff0c;关键字分别为&#xff5b;19&#xff0c;14&#xff0c;23&#xff…...

编程日记 2023/11/14 10:51:46

一款IT团队都在用的私有化知识库，技术开放，还开源了！

IT和软件开发团队需要处理大量的技术文档和知识&#xff0c;通过建立内部知识库&#xff0c;可以将技术文档、代码示例、最佳实践等知识整理和归档起来&#xff0c;方便团队成员查找和参考。 IT和软件开发团队为什么要建立内部知识库&#xff1f; 提高知识管理效率&#xff1a…...

编程日记 2023/11/14 10:50:45

解决 docker compose 官方 MySQL 镜像在容器中不能输入中文的问题

该问题可以通过添加环境变量解决&#xff0c;途径如下&#xff1a; 一、如果容器没条件或不允许重启&#xff0c;可通过命令行方式临时解决。 docker compose exec SERVICE-NAME env LANGC.UTF-8 mysql -u username -p 二、修改 docker-compose.yml 配置文件一劳永逸 envir…...

编程日记 2023/11/14 10:49:44

基于连续Hopfield神经网络优化——旅行商问题优化计算

大家好&#xff0c;我是带我去滑雪&#xff01; 利用神经网络解决组合优化问题是神经网络应用的一个重要方面。所谓组合优化问题&#xff0c;就是在给定约束条件下&#xff0c;使目标函数极小&#xff08;或极大&#xff09;的变量组合问题。将Hopfield网络应用于求解组合优化问…...

编程日记 2023/11/14 10:48:43

SpringBoot整合Activiti7——定时器事件（九）

文章目录 定时器事件时间定义时间固定时间段时间周期 1.开始事件2.中间事件3.边界事件代码实现xml文件自定义服务任务监听器自定义用户任务监听器测试流程流程执行步骤 定时器事件 可以用在开始事件、中间事件、边界事件上&#xff0c;边界事件可以是中断和非中断边界事件 需要…...

编程日记 2023/11/14 10:47:42

轻量封装WebGPU渲染系统示例＜29＞- 深度模糊DepthBlur(源码)

实现方式: step1. 通过mrt机制&#xff0c;输出颜色和深度相关数据的两张rtt纹理。 step2. 基于上述颜色纹理&#xff0c;生成一张模糊之后的新rtt纹理。 setp3. 基于深度(也就是距离摄像机的远近)数据&#xff0c;合成颜色和模糊纹理数据&#xff0c;并最终输出。 当前示例…...

编程日记 2023/11/14 10:46:41

LeetCode226. Invert Binary Tree

文章目录 一、题目二、题解2.1 前序遍历版本2.2 中序遍历版本2.3 后序遍历版本 一、题目 Given the root of a binary tree, invert the tree, and return its root. Example 1: Input: root [4,2,7,1,3,6,9] Output: [4,7,2,9,6,3,1] Example 2: Input: root [2,1,3] Ou…...

编程日记 2023/11/14 10:45:40

Java设计模式-创建型模式-建造者模式

建造者模式 建造者模式案例与工厂模式的区别&#xff1a;Builder 注解 建造者模式 建造者模式是将一个复杂对象的构件与表示分离&#xff0c;使得同样的构件过程可以创建不同的表示。 建造者模式将内部构件的创建和组装分割开&#xff0c;一般使用链式编程&#xff0c;代码整洁…...

编程日记 2023/11/14 10:43:38

PyQt中QFrame窗口中的组件不显示的原因

文章目录 问题代码&#xff08;例&#xff09;原因和解决方法 问题代码&#xff08;例&#xff09; from PyQt5.QtWidgets import * from PyQt5.QtGui import QFont, QIcon, QCursor, QPixmap import sysclass FrameToplevel(QFrame):def __init__(self, parentNone):super().…...

编程日记 2023/11/14 10:41:36

git 命令行回退版本

git 命令行回退版本 git 命令行回退版本命令: 1.切换到需要回退的分支 git checkout branch-v2.0.02.更新远程分支 git fetch3.找到需要回退版本的版本号git revert a6914da55ff40a09e67ac2426b86f1212e6580eb4.清除工作区缓存git clean -df5.强制提交git push -f...

编程日记 2023/11/14 10:38:33

IntelliJ IDEA 安装 GitHub Copilot插件 （最新）

注意&#xff1a; GitHub Copilot 插件对IDEA最低版本要求是2021.2&#xff0c;建议直接用2023.3&#xff0c;一次到位反正后续要升级的。 各个版本的依赖关系&#xff0c;请参照&#xff1a; ##在线安装&#xff1a; 打开 IntelliJ IDEA扩展商店&#xff0c;输入 "Git…...

编程日记 2023/11/14 10:37:32

中文NLP入门首选：bert-base-chinese预训练模型快速部署指南

中文NLP入门首选&#xff1a;bert-base-chinese预训练模型快速部署指南 1. 为什么选择bert-base-chinese模型 如果你刚开始接触中文自然语言处理&#xff0c;bert-base-chinese绝对是最佳起点。这个由Google发布的预训练模型&#xff0c;已经成为中文NLP领域的"瑞士军刀…...

编程新知 2026/4/2 23:39:13

2026年最好的AI创业机会，就藏在你压根看不上的角落里

还在焦虑AI会替代你&#xff1f;抢你饭碗&#xff1f;你根本不知道&#xff0c;现在有一群人&#xff0c;正在用AI给自己“印钞票”他们不是搞什么ChatGPT插件&#xff0c;也不是训练大模型&#xff0c;他们就盯着那些看着不起眼&#xff0c;甚至你压根看不上的小事。利用这些小…...

编程新知 2026/4/2 23:04:54

SiameseAOE模型效果展示：支持否定修饰‘不清晰’‘不太耐用’‘几乎没有售后’准确识别

SiameseAOE模型效果展示&#xff1a;支持否定修饰‘不清晰’‘不太耐用’‘几乎没有售后’准确识别 1. 引言&#xff1a;当AI学会“听”懂弦外之音 想象一下&#xff0c;你正在浏览一款新手机的电商评论。一条评论写道&#xff1a;“手机拍照效果不错&#xff0c;但屏幕不太耐…...

编程新知 2026/4/2 20:56:23

告别随机色！YOLOv7检测框颜色固定与高级样式自定义全攻略（从PIL到OpenCV）

YOLOv7检测框样式深度定制&#xff1a;从颜色固化到多语言字体支持实战 在计算机视觉项目的实际部署中&#xff0c;检测框的可视化效果往往直接影响最终用户体验。YOLOv7作为当前主流的目标检测框架&#xff0c;其默认的随机颜色分配和有限的字体支持可能无法满足专业场景需求。…...

编程新知 2026/4/2 20:50:21

TDOA定位算法在工业4.0中的关键应用解析（2025年更新）

1. TDOA定位算法如何重塑工业4.0生产线 想象一下&#xff0c;在一个现代化的汽车工厂里&#xff0c;几十台焊接机器人正在流水线上精准作业&#xff0c;数百辆AGV小车穿梭运送零件&#xff0c;而它们之间始终保持5厘米的安全距离——这种零碰撞、高效率的协作背后&#xff0c;正…...

编程新知 2026/4/2 19:29:28

瑞芯微RK3588/RK356X混合量化实战：手把手教你用rknn-toolkit2优化模型精度

瑞芯微RK3588/RK356X混合量化实战&#xff1a;手把手教你用rknn-toolkit2优化模型精度 在嵌入式AI开发中&#xff0c;模型量化是提升推理效率的关键技术&#xff0c;但传统的全INT8量化往往会导致精度损失&#xff0c;影响最终应用效果。瑞芯微的rknn-toolkit2工具链提供了混合…...

编程新知 2026/4/2 18:48:49

从华为实践学IPD：手把手教你写高通过率的Charter文档

华为IPD方法论实战&#xff1a;打造高价值Charter文档的7个关键步骤 在科技企业的研发管理领域&#xff0c;一份优秀的Charter文档往往决定着数千万甚至上亿研发投入的成败。华为IPD&#xff08;集成产品开发&#xff09;体系中的Charter开发流程&#xff0c;被全球众多科技企业…...

编程新知 2026/4/2 18:14:21

DETR训练避坑大全：Windows10+PyCharm环境下的5个常见报错解决方案

DETR实战指南&#xff1a;Windows 10环境下的5大典型问题深度解析与解决方案 在目标检测领域&#xff0c;DETR&#xff08;Detection Transformer&#xff09;作为首个完全基于Transformer架构的端到端检测系统&#xff0c;正在改变传统计算机视觉任务的实现方式。不同于Faste…...

编程新知 2026/4/2 17:19:10

在Windows上直接安装Android应用：APK-Installer完整使用指南

在Windows上直接安装Android应用&#xff1a;APK-Installer完整使用指南 【免费下载链接】APK-Installer An Android Application Installer for Windows 项目地址: https://gitcode.com/GitHub_Trending/ap/APK-Installer 你是否曾经想在Windows电脑上运行Android应用&…...

编程新知 2026/4/2 16:07:35

自动化智能体生成+外接MCP，我用 ModelEngine Nexent 5分钟手搓了一个小红书爆款收割机

前言&#xff1a;别让“工作流”困住了你的想象力 在 AI Agent 爆发的这一年&#xff0c;作为开发者&#xff0c;我们采用过“工作流&#xff08;Workflow&#xff09;”开发&#xff0c;提示词开发。 最近体验了 ModelEngine Nexent&#xff0c;它打出的 Slogan 是 “Your n…...

编程新知 2026/4/2 15:55:26