1. 引入multer模块
在express中处理文件上传需要用到multer模块,因此需要先在项目中安装multer,可以使用npm命令进行安装:
npm install --save multer
2. 创建multer实例
安装好multer之后,需要在node项目中引入multer并创建一个multer实例,这里我们定义在文件上传时的存储路径、文件名等配置信息,具体在代码中进行如下实现。
const multer = require('multer');
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'uploads/') // 上传文件的路径
},
filename: function (req, file, cb) {
const filenameArr = file.originalname.split('.');
const suffix = filenameArr[filenameArr.length - 1];
const filename = Date.now() + '.' + suffix;
cb(null, filename); // 文件名
}
});
const upload = multer({ storage: storage });
重要部分:这段代码定义的是multer的存储方式和文件名等,其中使用了一个回调函数,用来设置上传的文件保存的路径和文件名。
2.1. 设置上传文件的路径
在这段代码中,使用destination属性来设置文件上传后保存的文件夹路径,这里我们在根目录下创建了一个名为uploads的文件夹用来保存上传的文件。
2.2. 设置上传后的文件名
在函数filename中,根据上传的文件名生成一个新的文件名,在这里我们使用了Date.now()生成一个精确到毫秒的时间戳再拼接上文件后缀名作为新的文件名。
3. 定义接口并使用multer处理上传
在设置好multer之后,我们需要在express中定义一个接口来接收上传的文件,然后使用multer处理文件上传,最后返回一个回应告知文件上传成功或失败。具体实现如下:
const express = require('express');
const app = express();
const port = 3000;
app.post('/upload', upload.single('file'), function(req, res, next) {
const file = req.file;
if (!file) {
const error = new Error('上传文件不能为空!');
error.status = 400;
next(error);
} else {
res.send('文件上传成功!');
}
});
app.listen(port, () => console.log(`Example app listening on port ${port}!`))
重要部分:这段代码中,我们使用了express中的post方法来创建一个上传接口,并使用middleware的方式来处理文件上传,使用的middleware是upload.single('file'),其中'file'表示上传文件的字段名,如果上传的是多个文件则用upload.array('files')来处理。
在代码中的上传接口中,我们判断上传文件是否成功,如果成功就返回一个回应,如果上传失败则返回一个错误。
3.1. 判断文件是否上传成功
在代码中我们使用req.file获取到上传的文件对象,如果req.file为null或undefined则说明上传失败,反之就是上传成功。
3.2. 返回错误信息
在代码中如果上传失败,我们使用了middleware的方式返回一个错误信息,错误信息中包含了错误状态码和错误提示信息,这样可以提高代码的可读性和维护性。
4. 完整代码
总结一下,以上就是在node项目中如何使用express来处理文件上传的全部流程,下面是完整的代码:
const express = require('express');
const multer = require('multer');
const app = express();
const port = 3000;
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'uploads/') // 上传文件的路径
},
filename: function (req, file, cb) {
const filenameArr = file.originalname.split('.');
const suffix = filenameArr[filenameArr.length - 1];
const filename = Date.now() + '.' + suffix;
cb(null, filename); // 文件名
}
});
const upload = multer({ storage: storage });
app.post('/upload', upload.single('file'), function(req, res, next) {
const file = req.file;
if (!file) {
const error = new Error('上传文件不能为空!');
error.status = 400;
next(error);
} else {
res.send('文件上传成功!');
}
});
app.listen(port, () => console.log(`Example app listening on port ${port}!`))
5. 总结
文件上传是web开发中比较常见的一个需求,本文通过multer模块来实现了文件上传的功能,通过示例代码让大家更好地理解和掌握使用express来处理文件上传的流程,希望对大家有所帮助。