在日常开发的方方面面,图片和资源上传已经是前后端开发中必不可少的环节了。在express中,如何接收和处理客户端上传的文件呢?
在 express 当中,如果要实现文件上传,是需要借助一个中间件 multer,它用于处理 multipart/form-data 类型的表单数据。
注意: Multer 不会处理任何非 multipart/form-data 类型的表单数据。
Multer官网
基本使用
const express = require("express");
const multer = require("multer");
const app = express();
const port = 3000;
// dest 在哪里存储文件
const upload = multer({ dest: 'uploads/' })app.post('/profile', upload.single('avatar'), function (req, res, next) {// req.file 是 `avatar` 文件的信息// req.body 将具有文本域数据,如果存在的话
})app.post('/photos/upload', upload.array('photos', 12), function (req, res, next) {// req.files 是 `photos` 文件数组的信息// req.body 将具有文本域数据,如果存在的话
})const cpUpload = upload.fields([{ name: 'avatar', maxCount: 1 }, { name: 'gallery', maxCount: 8 }])
app.post('/cool-profile', cpUpload, function (req, res, next) {// req.files 是一个对象 (String -> Array) 键是文件名,值是文件数组// 例如:// req.files['avatar'][0] -> File// req.files['gallery'] -> Array//// req.body 将具有文本域数据,如果存在的话
})app.listen(port, () => {console.log(`Example app listening on port ${port}`);
});
磁盘存储引擎 (DiskStorage)
磁盘存储引擎可以让你控制文件的存储。
const upload = multer({storage: multer.diskStorage({// 用来确定上传的文件应该存储在哪个文件夹中destination: (req, file, cb) => {cb(null, "./uploads");},// 用于确定文件夹中的文件名filename: (req, file, cb) => {cb(null, file.fieldname + '-' + Date.now())},}),
});
错误处理机制
如果你想捕捉 multer 发出的错误,你可以自己调用中间件程序。如果你想捕捉 Multer 错误,你可以使用 multer 对象下的 MulterError 类 (即 err instanceof multer.MulterError)。
const multer = require('multer')
const upload = multer().single('avatar')app.post('/profile', function (req, res) {upload(req, res, function (err) {if (err instanceof multer.MulterError) {// 发生错误} else if (err) {// 发生错误}// 一切都好})
})