node.js文件上传（图片等等...）——利用connect-multiparty中间件

盛夏绽放

于 2024-08-13 19:58:47 发布

阅读量272

点赞数 7

文章标签： node.js 中间件

本文链接：https://blog.csdn.net/x15514104477/article/details/141171727

版权

一.概念步骤讲解

1.安装和引入中间件

安装：通过npm安装connect-multiparty：

npm install connect-multiparty --save。

引入：在项目中引入connect-multiparty：

var multipart = require('connect-multiparty');

2.基本设置

配置上传目录：指定上传文件的临时存储位置，例如：

app.use(multiparty({
	uploadDir: './temp'
}))

配置选项：支持传递选项给multiparty，例如限制文件大小、类型等：

multipart({
	maxFilesSize: 1024 * 1024
})

3.路由应用

上传单个文件：使用multipartMiddleware来处理含有文件上传字段的POST请求：

app.post('/upload', multipartMiddleware, function(req, res) {
 	/* 文件处理逻辑 */ 
 });

访问上传的文件：文件信息存储在req.files中，可以对其进行进一步处理。

4.文件处理

读取文件内容：可以使用Node.js的文件系统模块（fs）来读取和保存文件：

fs.readFile(req.files[0].path, function(err, data) {
	 /* 处理文件内容 */
 });

移动重命名文件：可以将临时文件转移到永久存储位置：

fs.rename(uploadedPath, dstPath, function(err) {
	 /* 错误处理 */ 
});

5.安全和优化

删除临时文件：在文件处理完毕后，应删除临时文件以避免浪费磁盘空间：

fs.unlinkSync(req.files[0].path);

验证文件类型：可以在multipart()配置中指定允许的文件类型，以增强安全性：

multipart({fileFilter: ['image/png', 'image/jpg']})。

二.结合实例讲解

1.路由应用中单张图片上传

（1）请求内容

在这里插入图片描述

（2）代码处理

首先，安装和引入中间件connect-multiparty
接着，就可以对上传文件的路由进行操作

// 上传图片--路由
// 定义路由处理文件上传请求
router.post('/upload', multipart(), function(req, res) {
    // 获取上传的文件信息
    console.log("aaaa",req.files)
    //输出的内容方便理解，以及方便后期处理数据
    //req.files = {
    //     picture: [
    //       {
    //         fieldName: 'picture',
    //         originalFilename: 'qq_pic_merged_1709551386063.jpg',
    //         path: 'public\\uploads\\sBYh8VnoAIYKrcc62CYLNorX.jpg',
    //         headers: [Object],
    //         size: 42859,
    //         name: 'qq_pic_merged_1709551386063.jpg',
    //         type: 'image/jpeg'
    //       },
    //       {
    //         fieldName: 'picture',
    //         originalFilename: '微信.jpg',
    //         path: 'public\\uploads\\c7ZaR999uw2q40c4pj2FqaCP.jpg',
    //         headers: [Object],
    //         size: 45267,
    //         name: '微信.jpg',
    //         type: 'image/jpeg'
    //       }
    //     ]
    // }
    //元素originalFilename是上传的文件名字
    //元素path是上传后自己变的名字
    let one_f = req.files.picture;
    var originalFilename = one_f.originalFilename;
    var file_path = one_f.path;

    // 读取文件内容并保存到新位置
   if(file_path){
        let date = new Date();
        //上传的图片的裸名
        let new_name = date.getTime() + path.extname(originalFilename);
        //对新路径进行拼接处理
        let new_file_name = 'public/uploads/'+new_name;
        console.log(new_file_name)
		//例子说明：new_file_name : public/uploads/1723549601566.jpg,
		//运用fs中间件中的rename（）方法对文件进行重命名
        fs.rename(file_path, new_file_name, function(err) {
            if (err) {
                console.log(err)
                //返后给前端的数据
                res.json({status:-1,msg:err.message});
            } else {
            	//返后给前端的数据
                res.json({ msg: "文件上传完成", code: 0, data: {
                    fileName:new_file_name,
                    ext:path.extname(new_file_name)
                }})
                // res.status(200).send('File uploaded successfully');
            }
        });
   }
});

2.路由应用中多张图片上传

此原理与上面的类似