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

最新推荐文章于 2024-04-09 18:06:58 发布

yun_hou

最新推荐文章于 2024-04-09 18:06:58 发布

阅读量1k

点赞数 1

分类专栏： nodejs 文章标签： express multer node

本文链接：https://blog.csdn.net/yun_hou/article/details/97130723

版权

nodejs 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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

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完成了

yun_hou

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
express + multer 实现文件上传（三）-- 多字段名上传

了解了前面的一、二后看一下多字段上传index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0...
复制链接

扫一扫

专栏目录