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

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

news 2025/8/5 1:37:26

前端

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}!`))