介绍
虽然您可能将图像上传到前端,但您需要在后端实现 API 和数据库来接收它们. 使用 Node.js 框架的 Multer和 Express,您可以在一个设置中建立文件和图像上传。
在本文中,您将学习如何使用 Node.js 后端使用 Multer 和 Express 上传图像。
前提条件
要了解更多关于 Node.js 的信息,请参阅我们的 如何在 Node.js 中编码系列
- 建议对 Express 中的 HTTP 请求方法有一个一般的了解。
步骤1 - 设置项目
由于 Express 是一个 Node.js 框架,请确保您从 Node.js安装了 Node.js,然后执行以下步骤:
为您的项目创建一个名为node-multer-express的新目录:
1mkdir node-multer-express
更改到新目录:
1cd node-multer-express
初始化一个新的 Node.js 项目与默认值. 这将包括你的 package.json 文件访问你的依赖:
1npm init
创建您的输入文件,index.js. 在这里您将处理您的 Express 逻辑:
1touch index.js
安裝 Multer, Express,和 morgan作為依賴:
1npm install multer express morgan --save
Multer 是您的图像上传库,并管理从 Express 请求访问表单数据。
在您的项目中应用 Multer
要设置您的 Multer 库,请使用 .diskStorage() 方法来表达存储文件到磁盘的位置. 在您的 index.js 文件中,请要求 Multer 并声明一个 storage 变量,并将其值分配到 .diskStorage() 方法的召唤:
1[label index.js]
2const multer = require('multer');
3
4const storage = multer.diskStorage({
5 destination: function(req, file, callback) {
6 callback(null, '/src/my-images');
7 },
8 filename: function (req, file, callback) {
9 callback(null, file.fieldname);
10 }
11});
在diskStorage()方法上的目的地属性决定了文件将存储在哪个目录中。在这里,文件将存储在目录中,即我的图像。
属性 filename 指示你的文件的名称. 如果你没有设置一个文件名,Multer 会返回一个随机生成的名称为你的文件。
<$>[注] 注: Multer 不会向文件名添加扩展,建议返回完整的文件名。
随着您的 Multer 设置完成,让我们在您的 Express 服务器中将其结合起来。
步骤 2 – 处理快递服务器
您的 Express 服务器是您处理 HTTP 请求方法的逻辑、请求和响应生命周期方法的位置,以及您可以实现文件和图像传输的 Multer 和 morgan 依赖。
在index.js文件中,声明一个app变量,并将其值分配给一个 Express 实例。要求在 Multer 和 morgan 中,并声明一个上传变量来存储一个 Multer 实例:
1[label index.js]
2import morgan from 'morgan';
3import express from 'express';
4const app = express();
5const multer = require('multer');
6const upload = multer({dest: 'uploads/'});
7
8app.use(express.json());
9app.use(express.urlencoded({extended: true}));
10app.use(morgan('dev'));
11
12app.use(express.static(__dirname, 'public'));
您将运行 Express 中间件, .use(),通过 .json() 中间件来分析您的响应作为 JSON 对象. 此外, .use() 接受 morgan 的召唤和论点 dev. 这告诉 Express 使用 morgan 的开发环境来提醒您响应状态。
设置全球变量后,设置一个接受匿名路线的POST请求,以及接收新文件和图像的req和响应呼叫:
1app.post('/', upload.single('file'), (req, res) => {
2 if (!req.file) {
3 console.log("No file received");
4 return res.send({
5 success: false
6 });
7
8 } else {
9 console.log('file received');
10 return res.send({
11 success: true
12 })
13 }
14});
当匿名路径接收文件或图像时,Multer 会将其保存到您指定的目录中。您POST请求中的第二个参数,upload.single() 是一个内置的 Multer 方法,用于保存具有字段名属性的文件并将其存储在req.file对象中。
如果您要整合数据库,您可以在您的 index.js 文件中要求该文件名:
1[label index.js]
2const host = req.host;
3const filePath = req.protocol + "://" + host + '/' + req.file.path;
将变量filePath存储到数据库中,并使用输入的文件名操作您的数据库。
结论
Express为您提供一个流程来保存和存储传入的文件和图像到您的服务器中间软件依赖 Multer 简化您的表单数据来处理多个文件上传。
如果您想了解更多关于 Node.js 的信息,请参阅我们的 如何在 React.js 系列中编码,或参阅我们的 Node.js 主题页面以获取练习和编程项目。