基于express+multer的文件上传

2023年11月22日 208次阅读 来源: 不要和我名字一样

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

  • 安装multer
npm install multer@1.0.5

在这里使用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
<form action="/upload" method="post" enctype="multipart/form-data">
    <h2>单图上传</h2>
    <input type="file" name="logo">
    <input type="submit" value="提交">
</form>

<hr>

<form action="/uploads" method="post" enctype="multipart/form-data">
    <h2>单图上传</h2>
    <input type="file" name="logo">
    <input type="file" name="logo">
    <input type="file" name="logo">
    <input type="submit" value="提交">
</form>

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

    原文作者：不要和我名字一样
    原文地址: https://www.jianshu.com/p/6eca2220b6a6
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞