本文完整版:《后端实战手把手教你写文件上传接口:如何应用 Node.js + MongoDB 开发 RESTful API 接口(Node.js + Express + MongoDB)》
本教程手把手教你搭建一套后端文件上传 API 接口,它应用 Node.js + Express + MongoDB 构建的后端服务。本文详细描述通过 Node.js 与数据库通信。整个服务搭建起来后,咱们应用 Postman 对整个后端服务进行测试。
本教程每段代码我都亲手测过,保障百分百没有谬误,请关上你的 terminal 追随本教程一起操作,从这里开始,成为一名后端工程师。
全栈实战教程:
- Vue + Node.js+Expres+MySQL 开发「待办清单」APP
- Vue + Axios + Node.js + Express 搭建带预览的「上传图片」治理后盾
- Vue + Axios + Node.js + Express 搭建「文件上传」治理后盾
- React + Nodejs 搭建带预览的「上传图片/预览」治理后盾
- React + Axios + Node.js + Express 搭建「文件上传」治理后盾
后端实战教程:
- 应用 Node.js + MySQL 开发 RESTful API 接口(Node.js + Express + Sequelize + MySQL)
- 应用 Node.js + MongoDB 开发 RESTful API 接口(Node.js + Express + MongoDB)
如果你正在搭建后盾管理工具,又不想解决前端问题,举荐应用卡拉云,卡拉云是新一代低代码开发工具,可一键接入常见数据库及 API ,无需懂前端,仅需拖拽即可疾速搭建属于你本人的后盾管理工具,一周工作量缩减至一天,详见本文文末。
✦ 文件上传治理后盾 Node.js + Express + Multer + MongoDB
咱们应用 Nodejs + Express + Multer + Mongodb 来搭建后端文件上传 API 后盾接口。
后端我的项目咱们提供以下几个API
- POST
/upload
文件上传接口 - GET
/files
文件列表获取接口 - GET
/files/[filename]
下载指定文件
后端我的项目构造
├── README.md├── package.json├── pnpm-lock.yaml└── node_modules └── ...└── src ├── config │ └── db.js ├── controllers │ └── flileUploadController.js ├── middleware │ └── upload.js ├── routes │ └── index.js └── server.js
src/db.js
包含 MongoDB 和 Multer 的配置(url、数据库、文件存储桶)。middleware/upload.js
:初始化 Multer GridFs 存储引擎(包含 MongoDB)并定义中间件函数。controllers/flileUploadController.js
:配置 Rest APIroutes/index.js
:路由,定义前端申请后端如何执行server.js
:Node.js入口文件
扩大浏览:《React Echarts 应用教程 - 如何在 React 中退出图表》
配置 Node.js 开发环境
咱们先应用命令 mkdir 创立一个空文件夹,而后 cd 到文件夹外面 这个文件夹就是咱们的我的项目文件夹
mkdir kalacloud-nodejs-mongodb-upload-filescd kalacloud-nodejs-mongodb-upload-files
接着应用命令
初始化我的项目,接着装置我的项目须要的依赖包, 输出如下命令
npm install express cors multer multer-gridfs-storage mongodb
package.js 文件
{ "name": "kalacloud-nodejs-mongodb-upload-files", "version": "1.0.0", "description": "Node.js upload multiple files to MongoDB", "main": "src/server.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [ "node", "upload", "multiple", "files", "mongodb" ], "license": "ISC", "dependencies": { "cors": "^2.8.5", "express": "^4.17.1", "mongodb": "^4.1.3", "multer": "^1.4.3", "multer-gridfs-storage": "^5.0.2" }}
扩大浏览:《React Router 6 (React路由) 最具体教程》
配置 MongoDB 数据库
src/config/db.js
module.exports = { url: "mongodb://localhost:27017/", database: "files_db", filesBucket: "photos",};
配置文件上传存储的中间件
src/middleware/upload.js
const util = require("util");const multer = require("multer");const { GridFsStorage } = require("multer-gridfs-storage");const dbConfig = require("../config/db");var storage = new GridFsStorage({ url: dbConfig.url + dbConfig.database, options: { useNewUrlParser: true, useUnifiedTopology: true }, file: (req, file) => { const match = ["image/png", "image/jpeg", "image/gif"]; if (match.indexOf(file.mimetype) === -1) { const filename = `${Date.now()}-kalacloud-${file.originalname}`; return filename; } return { bucketName: dbConfig.filesBucket, filename: `${Date.now()}-kalacloud-${file.originalname}` }; }});const maxSize = 2 * 1024 * 1024;var uploadFiles = multer({ storage: storage, limits: { fileSize: maxSize } }).single("file");var uploadFilesMiddleware = util.promisify(uploadFiles);module.exports = uploadFilesMiddleware;
这里咱们定义一个 storage
的配置对象 GridFsStorage
url
: 必须是指向MongoDB
数据库的规范MongoDB
连贯字符串。multer-gridfs-storage
模块将主动为您创立一个mongodb
连贯。options
: 自定义如何建设连贯file
: 这是管制数据库中文件存储的性能。该函数的返回值是一个具备以下属性的对象:filename, metadata, chunkSize, bucketName, contentType...
咱们还查看文件是否为图像file.mimetype
。bucketName
示意文件将存储在photos.chunks
和photos.files
汇合中。- 接下来咱们应用
multer
模块来初始化中间件util.promisify()
并使导出的中间件对象能够与async-await
. single()
带参数的函数是 input 标签的名称- 这里应用
Multer API
来限度上传文件大小,增加limits: { fileSize: maxSize }
以限度文件大小
扩大浏览:《最好的 6 个 React Table 组件具体亲测举荐》
创立文件上传的控制器
controllers/flileUploadController.js
这个文件次要用于文件上传,咱们创立一个名 upload
函数,并将这个函数导出去
- 咱们应用 文件上传中间件函数解决上传的文件
- 应用 Multer 捕捉相干谬误
- 返回响应
文件列表数据获取和下载
getListFiles
: 函数次要是获取photos.files
,返回url, name
download()
: 接管文件name
作为输出参数,从mongodb
内置关上下载流GridFSBucket
,而后response.write(chunk)
API 将文件传输到客户端。
const upload = require("../middleware/upload");const dbConfig = require("../config/db");const MongoClient = require("mongodb").MongoClient;const GridFSBucket = require("mongodb").GridFSBucket;const url = dbConfig.url; const baseUrl = "http://localhost:8080/files/";const mongoClient = new MongoClient(url);const uploadFiles = async (req, res) => { try { await upload(req, res); if (req.file == undefined) { return res.status(400).send({ message: "请抉择要上传的文件" }); } return res.status(200).send({ message: "文件上传胜利" + req.file.originalname, }); } catch (error) { console.log(error); if (error.code == "LIMIT_FILE_SIZE") { return res.status(500).send({ message: "文件大小不能超过 2MB", }); } return res.status(500).send({ message: `无奈上传文件:, ${error}` }); }};const getListFiles = async (req, res) => { try { await mongoClient.connect(); const database = mongoClient.db(dbConfig.database); const files = database.collection(dbConfig.filesBucket + ".files"); let fileInfos = []; if ((await files.estimatedDocumentCount()) === 0) { fileInfos = [] } let cursor = files.find({}) await cursor.forEach((doc) => { fileInfos.push({ name: doc.filename, url: baseUrl + doc.filename, }); }); return res.status(200).send(fileInfos); } catch (error) { return res.status(500).send({ message: error.message, }); }};const download = async (req, res) => { try { await mongoClient.connect(); const database = mongoClient.db(dbConfig.database); const bucket = new GridFSBucket(database, { bucketName: dbConfig.filesBucket, }); let downloadStream = bucket.openDownloadStreamByName(req.params.name); downloadStream.on("data", function (data) { return res.status(200).write(data); }); downloadStream.on("error", function (err) { return res.status(404).send({ message: "无奈获取文件" }); }); downloadStream.on("end", () => { return res.end(); }); } catch (error) { return res.status(500).send({ message: error.message, }); }};module.exports = { uploadFiles, getListFiles, download,};
扩大浏览:《React Draggable 实现拖拽 - 最具体中文教程》
定义 routes 路由
在 routes
文件夹中,应用 Express Router
在 index.js
中定义路由
const express = require("express");const router = express.Router();const uploadController = require("../controllers/flileUploadController");let routes = app => { router.post("/upload", uploadController.uploadFiles); router.get("/files", uploadController.getListFiles); router.get("/files/:name", uploadController.download); return app.use("/", router);}; module.exports = routes;
- POST
/upload
: 调用uploadFiles
控制器的性能。 - GET
/files
获取/files图像列表。 - GET
/files/:name
下载带有文件名的图像。
创立 Express 服务器
const cors = require("cors");const express = require("express");const app = express();global.__basedir = __dirname;var corsOptions = { origin: "http://localhost:8081"};app.use(cors(corsOptions));const initRoutes = require("./routes");app.use(express.urlencoded({ extended: true }));initRoutes(app);let port = 8080;app.listen(port, () => { console.log(`Running at localhost:${port}`);});
这里咱们导入了 Express
和 Cors
,
- Express 用于构建 Rest api
- Cors提供 Express 中间件以启用具备各种选项的 CORS。 创立一个 Express 应用程序,而后应用办法增加cors中间件 在端口 8080 上侦听传入申请。
运行我的项目并测试
在我的项目根目录下在终端中输出命令 node src/server.js, 控制台显示
Running at localhost:8080
应用 postman 工具测试,ok 我的项目失常运行
文件上传接口
文件列表接口
MongoDB 数据库
到这里整个后端「上传文件」治理后盾就搭建实现了。
Node.js 后端「文件上传」源码 你能够在咱们的 github 上下载到残缺的 Node.js 后端「文件上传」源码。
如果你还没搞懂,也不必焦急,间接应用卡拉云,无需懂任何前后端技术,仅需简略的鼠标拖拽即可疾速生成包含「文件上传」治理在内的任何后盾管理工具。
「文件上传」前后端搭建总结及卡拉云
本教程手把手教大家搭建 React 前端 + Node.js 后端 的「文件上传」管理工具,如果你一步步跟着走,肯定曾经把 Demo 跑起来了。但如果你会应用最新的低代码开发工具「卡拉云」,齐全不须要这么繁琐,仅需 1 分钟,就能搭建起属于本人的「文件上传」管理工具。
立刻开明卡拉云,从侧边工具栏间接拖拽组件到页面,生成上传组件和文件管理工具。1 分钟搞定「上传文件」管理工具。
再看个卡拉云的 Demo 案例,上面是用卡拉云搭建的数据库 CURD 后盾管理系统,只需拖拽组件,即可在10分钟内实现搭建。
可间接分享给共事一起应用:https://my.kalacloud.com/apps/8z9z3yf9fy/published
卡拉云可帮你疾速搭建企业外部工具,下图为应用卡拉云搭建的外部广告投放监测零碎,无需懂前端,仅需拖拽组件,10 分钟搞定。你也能够疾速搭建一套属于你的后盾管理工具。
卡拉云是新一代低代码开发平台,与前端框架 Vue、React等相比,卡拉云的劣势在于不必首先搭建开发环境,间接注册即可开始应用。开发者齐全不必解决任何前端问题,只需简略拖拽,即可疾速生成所需组件,可一键接入常见数据库及 API,依据疏导简略几步买通前后端,数周的开发工夫,缩短至 1 小时。立刻收费试用卡拉云。
全栈实战教程:
- Vue + Node.js+Expres+MySQL 开发「待办清单」APP
- Vue + Axios + Node.js + Express 搭建带预览的「上传图片」治理后盾
- Vue + Axios + Node.js + Express 搭建「文件上传」治理后盾
- React + Nodejs 搭建带预览的「上传图片/预览」治理后盾
- React + Axios + Node.js + Express 搭建「文件上传」治理后盾
后端实战教程:
- 应用 Node.js 开发 RESTful API 接口(Node.js + Express + Sequelize + MySQL)
- 应用 Node.js + MongoDB 开发 RESTful API 接口(Node.js + Express + MongoDB)