一.概念步骤讲解
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.路由应用中多张图片上传
此原理与上面的类似
(1)请求内容
(2)代码处理
首先,安装和引入中间件connect-multiparty
接着,就可以对上传文件的路由进行操作
// 上传图片--路由
// 定义路由处理文件上传请求
router.post('/uploadPics', 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;console.log('33333',one_f)//此数组用来存放path--上传后自己变的名字var arr = [];//此数组用来存放拼接后的文件名字var arr_base = []for(let i=0;i<one_f.length;i++){arr.push(one_f[i].path)console.log( '3333',path.parse(arr[i]))arr_base.push('public/uploads/'+path.parse(arr[i]).base)}//将拼接好的文件名字返回给前端res.json({ msg: "文件上传完成", code: 0, data: {pics:arr_base}})
});