[NodeJS] 使用Express multer搭建文件上传服务

夜风里唱

已于 2022-04-15 11:02:46 修改

阅读量1k

点赞数

分类专栏： nodejs 文章标签： nodejs express multer 文件上传服务器

于 2022-04-14 21:38:50 首次发布

本文链接：https://blog.csdn.net/zh8706/article/details/124181593

版权

nodejs 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1. 搭建Express项目

安装express

npm install express

创建express项目，以下app-server为项目名

express app-server

cd 进入app-server目录，并运行 npm install 安装相关依赖库

注意在app-server/bin目录的www文件里指定了端口，默认为3000，我这里改为3002，避免与其他服务冲突

再输入npm start命令即运行express服务

浏览器显示如下：

2. 搭建multer文件上传服务

express默认支持jade文件，如下图app-server/views 目录所示

需要改为支持html, 安装ejs

npm install ejs --save

并修改app-server目录下的app.js文件

并增加如下语句：

//引入路由
const multerUpload = require('./routes/upload');

//使用路由
app.use('/upload', multerUpload);

完整代码如下：

//引入路由
const multerUpload = require('./routes/upload');

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var ejs = require('ejs');// 使express支持html模板

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
//app.set('view engine', 'jade');
app.engine('html', ejs.__express);
app.set('view engine', 'html');

//使用路由
app.use('/upload', multerUpload);


//使用路由
app.use('/upload', multerUpload);app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

在routes目录下创建uploads.js文件，如下：

const express = require('express');
const router = express.Router();
const multer = require('multer');
 
let upload = multer({
    storage: multer.diskStorage({
        destination: function (req, file, cb) {
            cb(null, './uploads/');
        },
        filename: function (req, file, cb) {
            var changedName = (new Date().getTime())+'-'+file.originalname;
            cb(null, changedName);
        }
    })
});
 
//单个文件上传
router.post('/single', upload.single('singleFile'), (req, res) => {
    console.log(req.file);
    res.json({
        code: '0000',
        type: 'single',
        originalname: req.file.originalname,
        path: req.file.path
    })
});
 
//多个文件上传
router.post('/multer', upload.array('multerFile'), (req, res) => {
    console.log(req.files);
    let fileList = [];
    req.files.map((elem) => {
        fileList.push({
            originalname: elem.originalname
        })
    });
    res.json({
        code: '0000',
        type: 'multer',
        fileList: fileList
    });
});
 
module.exports = router;

设置完成后，删除app-server/views目录下的jada文件，并在该目录下创建html文件，如下：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
 
<body>
    <!-- 单文件上传 -->
    <div class="single">
        <div class="title">单个文件上传</div>
        <input type="file" name="singleFile" id="singleFile">
        <button class="submit">上传</button>
        <img src="" alt="" id="img">
    </div>
    
    <div class="multer">
        <div class="title">多个文件上传</div>
        <input type="file" name="multerFile" id="multerFile" multiple>
        <button class="submit">上传</button>
    </div>
 
 
    <div class="upbefore">
        <div class="title">可多次点击添加按钮，并预览</div>
        <div id="imgs"></div>
        <input type="file" id="upgteimg" value=""/>
        <button class="submit">上传</button>
    </div>
 
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
        // 单文件上传
        $('.single .submit').on('click', function () {
 
            var fileList = $('#singleFile')[0].files;
            console.log(fileList);
            var formData = new FormData();
            //此处文件名必须为 singleFile ，因为后台设置仅接口此文件名
            formData.append('singleFile', fileList[0]);
 
            $.ajax({
                url: '/upload/single',
                type: 'post',
                processData: false,
                contentType: false,//使用multer配合ajax时无需配置multipart/form-data，multer将自动配置，手动配置将报错，boundary not found
                data: formData,
                success: function (data) {
                    console.log(data)
                    $('#img').attr('src', data.path)
                }
            })
        });
 
        // 多文件上传
        $('.multer .submit').on('click', function () {
 
            var fileList = $('#multerFile')[0].files;
            console.log(fileList);
            var formData = new FormData();
 
            for (let i = 0; i < fileList.length; i++) {
                //此处文件名必须为 multerFile ，因为后台设置仅接口此文件名
                formData.append('multerFile', fileList[i]);
            }
 
            $.ajax({
                url: '/upload/multer',
                type: 'post',
                processData: false,
                contentType: false,
                data: formData,
                success: function (data) {
                    console.log(data)
                }
            })
        });
 
        // 可多次点击添加按钮，并预览
        let arr = [];
        let src = [];
 
        $('#upgteimg').on('change', function () {
            let $this = $(this)
            let url = URL.createObjectURL($this[0].files[0]);
            src.push(url);
            arr.push($this[0].files[0]);
            console.log(arr);
            console.log(src);
            showImg()
        })
        function showImg() {
            let html = ''
            for (let i = 0; i < src.length; i++) {
                const element = src[i];
                html += `<img src="${element}" alt="">`
            }
            $('#imgs').html(html);
        }
        $('.upbefore .submit').on('click', function () {
            var formData = new FormData();
            for (let i = 0; i < arr.length; i++) {
                //此处文件名必须为 multerFile ，因为后台设置仅接口此文件名
                formData.append('multerFile', arr[i]);
            }
            $.ajax({
                url: '/upload/multer',
                type: 'post',
                processData: false,
                contentType: false,
                data: formData,
                success: function (data) {
                    console.log(data)
                }
            })
        })
    </script>
</body>
 
</html>

3. 运行测试

然后npm start运行，浏览器可以看到如下：

选择文件，并上传，文件将上传到app-server/uploads目录下，如下图所示：

夜风里唱

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
[NodeJS] 使用Express multer搭建文件上传服务

1. 搭建Express项目安装expressnpm install express创建express项目，以下app-server为项目名npm install app-servercd 进入app-server目录，并运行 npm install 安装相关依赖库注意在app-server/bin目录的www文件里指定了端口，默认为3000，我这里改为3002，避免与其他服务冲突再输入npm start命令即运行express服务...
复制链接

扫一扫