基于express+multer的文件上传

图片上传是web开发中经常用到的功能，常用的开源组件有multer、formidable等，借助这两个开源组件，可以轻松搞定图片上传。在这里使用multer进行单文件和多文件的上传。

• 安装multer

npm install [email protected]

在这里使用1.0.5这个版本的，不然有的会报错

• app.js中代码

var express = require('express');
var app = express();
var fs = require('fs');
var path = require('path');
var multer = require('multer');

app.set('view engine', 'ejs');

//创建文件夹
var createFolder = function (folder) {
    try {
        fs.accessSync(folder);
    } catch (e) {
        fs.mkdirSync(folder);
    }
};
//这个路径为文件上传的文件夹的路径
var uploadFolder = './upload/';

createFolder(uploadFolder);

// 通过 filename 属性定制
var storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, uploadFolder);    // 保存的路径，备注：需要自己创建
    },
    filename: function (req, file, cb) {
        var extname = path.extname(file.originalname);//获取文件扩展名
        // 将保存文件名设置为 字段名 + 时间戳+文件扩展名，比如 logo-1478521468943.jpg
        cb(null, file.fieldname + '-' + Date.now() + extname);
    }
});
// 通过 storage 选项来对 上传行为 进行定制化
var upload = multer({storage: storage});

// 访问表单页面
app.get('/', function (req, res, next) {
    res.render('index')
});
// 单图上传
app.post('/upload', upload.single('logo'), function (req, res, next) {
    res.send({ret_code: '0'});
});

//多图片上传
app.post('/uploads', upload.array('logo', 3), function (req, res, next) {
    res.send({ret_code: '0'});
});

app.listen(3000);

// 单图上传
app.post('/upload', upload.single('logo'), function (req, res, next) {
    res.send({ret_code: '0'});
});

在单文件上传的时候，第一个参数为请求路径，第二个参数upload.single('logo'),中参数为表单inputd的name属性值。第三个为回调函数。

//多图片上传
app.post('/uploads', upload.array('logo', 3), function (req, res, next) {
    res.send({ret_code: '0'});
});

在多文件上传的时候，第一个参数为请求路径，第二个参数upload.array('logo', 3)中参数为表单input的name属性值，后面的数字为上传文件个数。第三个为回调函数。

• 在view文件夹下新建上传文件页面index.ejs

    
单图上传
    
    





    
单图上传
    
    
    
    

github地址：https://github.com/17868804701/upload.git