Node.js实现HTML表单文件上传
程序员文章站
2022-06-19 08:46:42
Node.js实现HTML表单文件上传模块加载单文件上传服务器代码HTML代码同类多文件上传不同类多文件上传最近因为项目,需要将多文件保存到服务器的指定文件。因为刚接触nodejs,所以把笔记记录下来,一是为了笔记,二是为了交流。一般来讲,要将文件上传到服务器,需要两步。我们在完成文件上传,其实只是上传了一个无格式文件,因此还需要修改其名称及文件后缀名。模块加载本次将文件上传我选择的模块为multer,同时因为需要对文件以及路径进行操作,所以还需要fs和path模块。npm install mul...
最近因为项目,需要将多文件保存到服务器的指定文件。因为刚接触nodejs,所以把笔记记录下来,一是为了笔记,二是为了交流。
一般来讲,要将文件上传到服务器,需要两步。我们在完成文件上传,其实只是上传了一个无格式文件,因此还需要修改其名称及文件后缀名。
模块加载
本次将文件上传我选择的模块为multer,同时因为需要对文件以及路径进行操作,所以还需要fs和path模块。
npm install multer fs path -s -g
单文件上传
服务器代码
因为我的网页后面会有多个,所以选择了路由的方式。
var fs = require('fs')
var path = require("path")
var multer = require("multer")
var router = express.Router()
let objMulter = multer({dest:'public/upload'});//文件路径保存
router.post("/login",objMulter.single("xmlFile"), function (req,res){ //.single(' ')的是HTML表单中的名称
console.log(req.file);//控制台输出文件信息
//fs.renameSync(old file name, new file name);需要的信息基本上都可以从控制台显示中获取
fs.renameSync(req.file.path, 'public\\upload\\' + req.file.originalname);//文件路径均为相对路径
});
module.exports = router;
HTML代码
这边只贴表单的代码,其余的部分百度即可
<form action="/login" method="post" enctype="multipart/form-data`在这里插入代码片`">//使用multer模块,enctype应为multipart/form-data
<div class="form-group">
<label for="input_name">xxx</label>
<input type="file" accept=".xml" class="style_file_content" required="required" minlength="11" maxlength="11" id="xmlFile" name="xmlFile" style="width:260px; height:30px;">
</div></br>
<button type="submit" class="btn btn-default" style="width: 80px">上传</button>
</form>
同类多文件上传
只需要将objMulter.single("xmlFile")
改为objMulter.array('xmlFile', 12)
,其中12为文件数量。同样可以通过控制台输出观察。
不同类多文件上传
要实现不同类多文件上传,主要是利用multer的fields
属性来进行设置,然后将其传入multer。
var mulUpload = objMulter.fields([{name: 'xmlFile', maxCount: 1}, { name: 'jsFile', maxCount:1}])
router.post("/login", mulUpload, function (req,res){
console.log(req.files['xmlFile'][0]);
fs.renameSync(req.files['xmlFile'][0].path, 'public\\upload\\' + req.files['xmlFile'][0].originalname);
fs.renameSync(req.files['jsFile'][0].path, 'public\\upload\\' + req.files['jsFile'][0].originalname);
});
因为HTML中的表单基本一致,所以后两部分中就没在写。第一次写博客,还不是很熟练,而且在Node开发中很多东西都只是知其然不知其所以然,希望能够通过这个平台逐渐提升自己,早日搭建出自己的网站。
如果希望用multer实现更多的功能,可以访问Multer官方文档,了解更多。
本文地址:https://blog.csdn.net/wangyang_15/article/details/108226846