【node】文件上传功能简易实现

找了不少文件上传的相关模块，最后选择了比较常用，并且是express推荐使用的 multer 来实现文件上传，附上 GitHub 地址

1. 开始

开始第一步，自然就是安装模块，不多说

npm install multer --save

这里简单说一下，因为文件上传是用 post 方法提交数据，所以上传的单文件或者多文件会作为一个 body 体添加到请求对象中，我们可以通过 req.file 或者 req.files 查看上传后文件的相关信息。

以单文件上传为例，req.file 返回一个对象：

{
     "fieldname":"avatar",#前端上传文件input的name
     "originalname":"Wx.PHP",#本地文件名
     "encoding":"7bit",#文件编码类型
     "mimetype":"text/PHP",#文件类型
     "destination":"uploads/",#上传根目录
     "filename":"1497286037422Wx.PHP",#上传后文件名
     "path":"uploads/1497286037422Wx.PHP",#文件路径
     "size":18174    #文件大小
}

该对象的 key 值是固定的，velue 值根据配置生成，用于实现相关逻辑

2. 实现

实现分两部分，前端和后端

前端

前端就是普通的写法，form 表单提交

<form action="/test/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="avatar">
    <input type="submit" name="提交">
</form>

切记，enctype="multipart/form-data" 这个属性一定要加上，否则后台接收不到文件。

后端

首先我们新建配置文件，upload.js

// upload.js

var multer  = require('multer');    # 引入模块

var storage = multer.diskStorage({
    destination: function (req,file,cb) {
        cb(null,'uploads/')
    },filename: function (req,Date.Now()+file.originalname)
    }
})

var upload = multer({ storage: storage })

module.exports = upload;

diskStorage方法相当于创建一个磁盘存储引擎，配置文件上传路径，文件名等，可控性更高。

destination    # 设置文件上传路径
filename       # 重命名文件

然后新建路由接收文件，file.js

// file.js 

var express = require('express');
var router = express.Router();

// 引入配置文件
var upload = require('../config/upload');

router.post('/upload',upload.single('avatar'),function(req,res,next) {
    res.send(req.file);
});

module.exports = router;

file.js 中 upload.single() 方法表示接受单文件，常用的有

upload.single(fname);    // 接收单文件
upload.array(fname[,maxCount])    //接收多文件，maxCount表示接收最大数量

fname 是前端 <input type="file" name="fname"> 的 name 值

基本的上传文件方法就这些了，当然还有很多的配置参数之类的设置，要参考 GitHub 说明，地址在开头，需要者自行查阅

本文由 杨成功 原创，更多原创内容请到专栏 杨成功的全栈之路