Express+multer 上传图片（单文件，多文件）

最新推荐文章于 2023-11-02 16:53:30 发布

Devin·Finn

最新推荐文章于 2023-11-02 16:53:30 发布

阅读量2k

点赞数

分类专栏： NodeJS 文章标签： express nodejs 文件上传图片 mutler

本文链接：https://blog.csdn.net/DanBo_C/article/details/103018243

版权

NodeJS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

`fs`模块异步上传

app.post('/upload', upload.any(), function(req, res, next) {
        //req.files[0]// 上传的文件信息
        //需要Express托管静态文件public文件夹
        var des_file = "./public/images/" + req.files[0].originalname;
        fs.readFile( req.files[0].path, function (err, data) {
            fs.writeFile(des_file, data, function (err) {
                if( err ){
                    console.log( err );
                }else{
                    console.log( req.files[0].originalname );
                }
            });
        });
    });

`multer`模块引入

npm i multer --save

`multer`单文件上传

//dest设置上传原始文件的路径，single要与file的name保持一致
app.post('/upload', multer({dest: './public/upload_tmp/'})
        .single('file'), function (req, res, next) {
        if (req.file.length === 0) {
            res.render("error", {message: "上传文件不能为空！"});
            return
        } 
        else {
            let file = req.file;
            //存储上传对象信息
            let fileInfo = {};
            //修改名字，第一个参数为旧路径，第二个参数为新路径（注意：旧路径要和上面的dest保持一致）
            fs.renameSync('./public/upload_tmp/' + file.filename, './public/images/' + file.originalname);
            // 获取文件信息
            fileInfo.mimetype = file.mimetype;
            fileInfo.originalname = file.originalname;
            fileInfo.size = file.size;
            fileInfo.path = file.path;
			//设置响应类型、编码
            res.set({
                'content-type': 'application/json; charset=utf-8'
            });
            res.end("成功");
        }
    });

`multer`多文件上传


//与单文件相比唯一的不同就是不再使用.single
//改为.array('file', 10)，其中的file和.single的参数一样，10为上传数目的最大限制
app.post('/upload', multer({dest: './public/upload_tmp/'}).array('file', 10), function (req, res, next) {
        let files = req.files;
        if (files.length === 0) {
            res.render("error", {message: "上传文件不能为空！"});
            return
        } else {
            let fileInfos = [];
            for (var i in files) {
                let file = files[i];
                let fileInfo = {};

                fs.renameSync('./public/upload_tmp/' + file.filename, './public/images/' + file.originalname);

                //获取文件基本信息
                fileInfo.mimetype = file.mimetype;
                fileInfo.originalname = file.originalname;
                fileInfo.size = file.size;
                fileInfo.path = file.path;

                fileInfos.push(fileInfo);
            }
            // 设置响应类型、编码
            res.set({
                'content-type': 'application/json; charset=utf-8'
            });
            res.end("成功");
        }
    });

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>

<form action="/upload" method="post" enctype="multipart/form-data">
	<!-- multiple允许多文件上传，单文件可忽略-->
    <input id="files" type="file" name="file" multiple/>
    <input type="submit" value="上传"/>
</form>

</body>

</html>