欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-05 14:53:09
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

相关标签: java node.js