Node.js实现HTML表单文件上传

同类多文件上传
不同类多文件上传

最近因为项目，需要将多文件保存到服务器的指定文件。因为刚接触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>

不同类多文件上传

要实现不同类多文件上传，主要是利用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