欢迎光临
我们一直在努力

Express + multer 实现图片上传

简介

图片上传经常用于用户头像等场景。在node中常用的multer、formidable实现图片功能。

安装

npm install multer --save

单图上传

实现单图上传需要引用内置模块fs,另外需要将form表单属性设置为

enctype = "multipart/form-data"

app.js

const multer = require('multer')
// 需要在当前目录下创建uploads
const upload = multer({dest:'uploads/'})
// 下面实现单文件上传
app.post('/uploads',upload.single('logo'),function(req,res,next)=>{
    res.send();
})
// 下面创建form路由

form.html

<form action="/upload-single" method="post" enctype="multipart/form-data">
    <input type="file" name="logo">
    <input typ="summit" value="提交">
</form>

提交图片后,图片将被上传至upload目录下。

多图上传

基于单图上传修改下面的代码即可。

app.post('/upload', upload.array('logo', 2), function(req, res, next){
    res.send({ret_code: '0'});
});

信息获取

如果想把图片存储到数据库中,就需压图片的信息,我们可以借助multer获取文件的信息。实际上,我们想要的到部分信息都会放在 req.file上。

app.post('/upload', upload.single('logo'), function(req, res, next){
    var file = req.file;
    console.log('文件类型:%s', file.mimetype);
    console.log('原始文件名:%s', file.originalname);
    console.log('文件大小:%s', file.size);
    console.log('文件保存路径:%s', file.path);
    res.send({ret_code: '0'});
});

自定义本地保存路径可以通过multer(option) option的dest设置

var upload = multer({ dest: 'upload/' });

如果想要自定义保存本地的文件名,可以通过storage这个参数对资源保存的路径、文件名进行设置。其中:

  • destination:设置资源的保存路径,需要手动创建。默认会设置为 /tmp/uploads下
  • filename:设置资源保存在本地的文件名
var uploadFolder = './upload/';

createFolder(uploadFolder);

// 通过 filename 属性定制
var storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, uploadFolder);    // 保存的路径,备注:需要自己创建
    },
    filename: function (req, file, cb) {
        // 将保存文件名设置为 字段名 + 时间戳,比如 logo-1478521468943
        cb(null, file.fieldname + '-' + Date.now());  
    }
});

// 通过 storage 选项来对 上传行为 进行定制化
var upload = multer({ storage: storage })

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

最后更多资料可以参考:https://github.com/expressjs/multer/blob/master/doc/README-zh-cn.md

赞(0) 打赏
未经允许不得转载:散人研 » Express + multer 实现图片上传
分享到: 更多 (0)

评论 抢沙发

5 + 7 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏