node 文件上传操作(前端 form表单上传 formData上传 后端 node 使用express+multer)
目录
- 前端
- 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"…...
容器数据卷+MYSQL实战
什么是容器数据卷？ 让我们回忆一下docker理念： 就是将应用和环境打包成一个镜像 数据？ 如果数据都在容器中，那么我们删除容器，数据就会丢失 ！需求：数据持久化就完美了 对于MYSQL࿰…...
开发者测试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…...
HoudahGeo 6 for Mac：掌控地理位置信息的强大工具
在当今这个信息化的世界，地理位置信息的重要性日益凸显。无论是在工作、学习还是生活中，我们都需要理解和利用地理位置信息。如果你正在寻找一个能帮助你更好地管理和理解地理位置信息的工具，那么HoudahGeo 6 for Mac是一个值得考虑的选择。 …...
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、…...
C与汇编深入分析
汇编怎么调用C函数 直接调用 BL main传参数 在arm中有个ATPCS规则（ARM-THUMB procedure call standard）（ARM-Thumb过程调用标准）。 约定r0-r15寄存器的用途： r0-r3：调用者和被调用者之间传递参数r4-r11…...
MySQL中外键的使用及外键约束策略
一、外键约束的概念 外键约束（FOREIGN KEY,缩写FK是数据库设计的一个概念，它确保在两个表之间的关系保持数据的一致性和完整性。 外键是指表中的某个字段的依赖于另一张表中某个字段的值，而被依赖的字段必须具有主键约束或者唯一约束&#…...
Home Assistant使用ios主题更换背景
Home Assistant使用ios主题、更换背景 lovelace-ios-dark-mode-theme 默认前置情况，1、已安转HACS插件2、搜索安装 IOS Dark Mode Theme1）第一、二步应该很容易实现，configuration.yaml文件很容易被找到2）而本人在进行第三步操作时…...
深入了解鼠标光标的设置过程
有一位读者问了这样一个问题： “为什么鼠标光标的设定绑定在窗口类，而不是窗口上？” 这个问题隐含地假设了光标与窗口类相关联。虽然每个窗口类都有一个关联的光标，但决定使用哪个光标的是窗口。 光标设置过程在 WM_SETCURSOR 消…...
数据结构-散列表
列表（Hash Table），又称哈希表，是一种数据结构，特点是：数据元素的关键字与其存储地址直接相关 例：有一堆数据元素，关键字分别为｛19，14，23ÿ…...
一款IT团队都在用的私有化知识库，技术开放，还开源了！
IT和软件开发团队需要处理大量的技术文档和知识，通过建立内部知识库，可以将技术文档、代码示例、最佳实践等知识整理和归档起来，方便团队成员查找和参考。 IT和软件开发团队为什么要建立内部知识库？ 提高知识管理效率：…...
解决 docker compose 官方 MySQL 镜像在容器中不能输入中文的问题
该问题可以通过添加环境变量解决，途径如下： 一、如果容器没条件或不允许重启，可通过命令行方式临时解决。 docker compose exec SERVICE-NAME env LANGC.UTF-8 mysql -u username -p 二、修改 docker-compose.yml 配置文件一劳永逸 envir…...
基于连续Hopfield神经网络优化——旅行商问题优化计算
大家好，我是带我去滑雪！ 利用神经网络解决组合优化问题是神经网络应用的一个重要方面。所谓组合优化问题，就是在给定约束条件下，使目标函数极小（或极大）的变量组合问题。将Hopfield网络应用于求解组合优化问…...
SpringBoot整合Activiti7——定时器事件（九）
文章目录 定时器事件时间定义时间固定时间段时间周期 1.开始事件2.中间事件3.边界事件代码实现xml文件自定义服务任务监听器自定义用户任务监听器测试流程流程执行步骤 定时器事件 可以用在开始事件、中间事件、边界事件上，边界事件可以是中断和非中断边界事件 需要…...
轻量封装WebGPU渲染系统示例＜29＞- 深度模糊DepthBlur(源码)
实现方式: step1. 通过mrt机制，输出颜色和深度相关数据的两张rtt纹理。 step2. 基于上述颜色纹理，生成一张模糊之后的新rtt纹理。 setp3. 基于深度(也就是距离摄像机的远近)数据，合成颜色和模糊纹理数据，并最终输出。 当前示例…...
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…...
Java设计模式-创建型模式-建造者模式
建造者模式 建造者模式案例与工厂模式的区别：Builder 注解 建造者模式 建造者模式是将一个复杂对象的构件与表示分离，使得同样的构件过程可以创建不同的表示。 建造者模式将内部构件的创建和组装分割开，一般使用链式编程，代码整洁…...
PyQt中QFrame窗口中的组件不显示的原因
文章目录 问题代码（例）原因和解决方法 问题代码（例） from PyQt5.QtWidgets import * from PyQt5.QtGui import QFont, QIcon, QCursor, QPixmap import sysclass FrameToplevel(QFrame):def __init__(self, parentNone):super().…...
git 命令行回退版本
git 命令行回退版本 git 命令行回退版本命令: 1.切换到需要回退的分支 git checkout branch-v2.0.02.更新远程分支 git fetch3.找到需要回退版本的版本号git revert a6914da55ff40a09e67ac2426b86f1212e6580eb4.清除工作区缓存git clean -df5.强制提交git push -f...
IntelliJ IDEA 安装 GitHub Copilot插件 （最新）
注意： GitHub Copilot 插件对IDEA最低版本要求是2021.2，建议直接用2023.3，一次到位反正后续要升级的。 各个版本的依赖关系，请参照： ##在线安装： 打开 IntelliJ IDEA扩展商店，输入 "Git…...
)
椭圆曲线密码学(ECC)
一、ECC算法概述 椭圆曲线密码学（Elliptic Curve Cryptography）是基于椭圆曲线数学理论的公钥密码系统，由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA，ECC在相同安全强度下密钥更短（256位ECC ≈ 3072位RSA…...
Docker 运行 Kafka 带 SASL 认证教程
Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明：server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...
智能在线客服平台：数字化时代企业连接用户的 AI 中枢
随着互联网技术的飞速发展，消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁，不仅优化了客户体验，还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用，并…...
高等数学（下）题型笔记（八）空间解析几何与向量代数
目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...
【JavaSE】绘图与事件入门学习笔记
-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角，以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向，距离坐标原点x个像素;第二个是y坐标，表示当前位置为垂直方向，距离坐标原点y个像素。 坐标体系-像素 …...
【笔记】WSL 中 Rust 安装与测试完整记录
#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统：Ubuntu 24.04 LTS (WSL2)架构：x86_64 (GNU/Linux)Rust 版本：rustc 1.87.0 (2025-05-09)Cargo 版本：cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...
BLEU评分：机器翻译质量评估的黄金标准
BLEU评分：机器翻译质量评估的黄金标准 1. 引言 在自然语言处理(NLP)领域，衡量一个机器翻译模型的性能至关重要。BLEU (Bilingual Evaluation Understudy) 作为一种自动化评估指标，自2002年由IBM的Kishore Papineni等人提出以来，…...
wpf在image控件上快速显示内存图像
wpf在image控件上快速显示内存图像https://www.cnblogs.com/haodafeng/p/10431387.html 如果你在寻找能够快速在image控件刷新大图像（比如分辨率3000*3000的图像）的办法，尤其是想把内存中的裸数据（只有图像的数据，不包…...
【Elasticsearch】Elasticsearch 在大数据生态圈的地位 实践经验
Elasticsearch 在大数据生态圈的地位 & 实践经验 1.Elasticsearch 的优势1.1 Elasticsearch 解决的核心问题1.1.1 传统方案的短板1.1.2 Elasticsearch 的解决方案 1.2 与大数据组件的对比优势1.3 关键优势技术支撑1.4 Elasticsearch 的竞品1.4.1 全文搜索领域1.4.2 日志分析…...
Python训练营-Day26-函数专题1：函数定义与参数
题目1：计算圆的面积 任务： 编写一个名为 calculate_circle_area 的函数，该函数接收圆的半径 radius 作为参数，并返回圆的面积。圆的面积 π * radius (可以使用 math.pi 作为 π 的值)要求：函数接收一个位置参数 radi…...