express + multer 实现文件上传（三）-- 多字段名上传

最新推荐文章于 2025-07-08 17:44:43 发布

原创最新推荐文章于 2025-07-08 17:44:43 发布 · 1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#express #multer #node

nodejs 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一个使用HTML和Express.js实现的多字段文件上传案例，包括前端页面搭建、多文件选择与提交，以及后端通过Multer中间件处理不同字段名的文件上传请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

了解了前面的一、二后看一下多字段上传

index.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>
        <input type="file" name="" id="avatar" multiple>
    </div>
    <div>
        <input type="file" name="" id="gallery" multiple>
    </div>
    <div>
        <button class="submit">上传</button>
    </div>

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
    $('.submit').on('click', function(){
        var avatarList = $('#avatar')[0].files,
        galleryList = $('#gallery')[0].files;

        var formData = new FormData();

        for(let i = 0;i<avatarList.length;i++){
            formData.append('avatar', avatarList[i]);
        }

        for(let j = 0;j<galleryList.length;j++){
            formData.append('gallery', galleryList[j]);
        }

        $.ajax({
            url: '/upload/fields',
            type:'post',
            processData:false,
            contentType:false,
            data: formData,
            success: function(data){
                console.log(data)
            }
        })

    });
    </script>
</body>

</html>

upload.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);
        }
    })
});
 
//多字段名上传
let multipleFields = upload.fields([
    {name:'avatar', maxCount:3},
    {name:'gallery', maxCount:3}
]);
router.post('/fields', (req,res)=>{
    multipleFields(req,res,(err) => {
        console.log(req.files);
        if(!!err){
            console.log(err.message);
            res.json({
                code: '2000',
                type: 'field',
                msg:err.message
            })
            return;
        }
        var fileList = [];
        for(let item in req.files){
            var fieldItem = req.files[item];
            fieldItem.map((elem) => {
                fileList.push({
                    fieldname: elem.fieldname,
                    originalname: elem.originalname
                })
            });
        }

        res.json({
            code: '0000',
            type: 'field',
            fileList: fileList,
            msg:''
        })
    });
});

 
module.exports = router;

到此为止，所有的multer文件上传demo完成了