笙亿网络策划

Angular 怎么用 Express 搭建上传 API？

约 5 分钟读完 32 阅
文章导读
Previous Quiz Next 让我们创建一个“示例 Web 应用程序”来将文件上传到服务器。我们将开发一个用于文件上传的 API，然后从 Angular 前端应用程序调用这个 API。在整个过程中，我们将学习和处理不同类型的响应。
A A

Angular - 创建基于 Express 的上传 API

Previous
Quiz
Next

让我们创建一个“示例 Web 应用程序”来将文件上传到服务器。我们将开发一个用于文件上传的 API，然后从 Angular 前端应用程序调用这个 API。在整个过程中，我们将学习和处理不同类型的响应。

首先，让我们通过执行以下步骤创建一个新的 express app，用于将文件上传到服务器：

步骤 1： 转到您喜欢的 workspace，如下所示 −

cd /go/to/your/favorite/workspace

步骤 2： 创建一个名为 expense-rest-api 的新文件夹并进入该文件夹 −

mkdir upload-rest-api && cd upload-rest-api

步骤 3： 使用 npm 命令提供的 init 子命令创建一个新应用程序，如下所示 −

npm init

运行上述命令后，它会询问几个问题，使用默认答案回答所有问题。

步骤 4： 安装 express 和 cors 包以创建基于 Node 的 Web 应用程序 −

npm install express cors multer --save

这里，

  • express 是一个用于创建 Web 应用程序的 Web 框架。
  • cors 是一个用于处理 HTTP 应用程序中 CORS 概念的中间件。
  • multer 是另一个用于处理文件上传的中间件。

步骤 5： 打开 index.js 并放置以下代码（如果未找到，请在根文件夹中手动创建它） −

index.js

var express = require("express")
var cors = require('cors')
const multer = require('multer');

var app = express()
app.use(cors());

var bodyParser = require("body-parser");
app.use(express.urlencoded({ extended: true }));
app.use(express.json());

var HTTP_PORT = 8000
app.listen(HTTP_PORT, () => {
   console.log("Server running on port %PORT%".replace("%PORT%", HTTP_PORT))
});

const storage = multer.diskStorage({
   destination: (req, file, cb) => {
      cb(null, "uploads/")
   },
   filename: (req, file, cb) => {
      cb(null, Date.now() + "-" + file.originalname)
   },
})

const upload = multer({ storage: storage });
app.post('/api/upload', upload.single('photo'), (req, res) => {
   console.log(req.file)
   res.json({ message: 'File uploaded successfully!' });
});

这里，

  • 通过启用 cors、multer 和 body-parser 中间件配置了一个简单的 express app。

  • 创建了一个新的 API /api/upload，用于接受文件并将其存储在服务器的 uploads 文件夹中。

  • 将上传文件夹配置为 uploads。

  • 该 API 将接受名为 photo 的文件输入。

步骤 6： 创建一个用于存储上传文件的目录 −

mkdir uploads

步骤 7： 现在，通过执行以下命令运行应用程序 −

node index.js

步骤 8： 要测试应用程序，您可以使用 Postman、Curl 或任何其他 HTTP 客户端工具。以下是操作方法 −

  • 创建一个到 API 端点的新请求：http://localhost:8000/api/upload.
  • 将请求方法设置为 post。
  • 添加一个 form-data 字段，键为 photo，将其 type 设置为 file，并附加您要上传的文件。

输出

请求发送并文件上传后，您将收到成功消息。

{
   "message": "File uploaded successfully!"
}