在 MEAN Stack 中实现图片的服务端上传

在前一节中，我们成功实现了 MIME 类型验证器，并将其用于图像验证。在本节中，我们将实现服务器端的文件上传功能。

上传文件意味着在服务器上，我们需要从传入的请求中提取此类文件字节体，而我们无法使用 bodyParser 来做到这一点。 bodyParser 适用于 JSON 或 URL 编码的数据，但不适用于文件。我们将执行以下步骤来执行服务器端上传：

1) 我们需要安装 "multer" 包。这是一个用于 NodeJS 和 ExpressJS 的包，允许我们提取传入的文件。我们将使用 npm 通过以下方式安装 multer 包：

2) 安装该包后，我们可以使用它。我们将通过简单地将其附加到应能够接受文件的特定路由来使用 multer。首先，我们需要通过以下方式在 post.js 文件中导入 multer：

3) Multer 需要一些配置，因此我们将创建一个新常量，并且在此常量中，我们需要定义 multer 应将检测到的传入请求中的文件放置在哪里。我们将通过调用 multer 的 diskStorage() 方法来做到这一点，如下所示：

4) 我们调用了 distStorage() 方法进行配置。我们将传递一个 JavaScript 对象 给 diskStorage() 方法。

5) 在此对象中，我们设置两个键，即 destination 和 filename。 destination 键是一个函数，每当 multer 尝试保存文件时都会执行该函数。此函数接受一个请求对象、提取的文件和一个回调。

6) 我们需要调用该回调以将应存储信息的位置传递回 multer。我们将调用该回调，并且对于该回调，我们需要传递两件事或两个参数。第一个参数是我们是否检测到某些错误，为此，我们传递 null，第二个参数只是一个字符串，其中包含应存储此内容的文件夹的路径。

我们需要在 backend 文件夹中创建 images 子文件夹。

7) filename 键是另一个函数，我们也可以从中获取请求对象、文件和回调。在此函数中，我们将提取名称。我们将使用文件的 originalname 属性来获取名称。我们还需要对其进行一些规范化，为此，我们将将其转换为全部小写，然后按空格将其拆分，然后再次使用破折号将其连接起来。这样，文件名中的任何空格都将被替换为破折号。

8) 存在一个问题，那就是，这将错过文件扩展名。但是，我们也会提取此扩展名，并且可以精确获取文件 MIME 类型。 multer 为我们提供了 MIME 类型。我们将创建一个 helper 常量来映射 MIME 类型以及我们想要的扩展名。我们需要支持三种类型的文件，即对于 image/png 作为 MIME 类型，我们将使用 png 作为扩展名，对于 image.jpeg 作为 MIME 类型，我们将使用 jpg 作为扩展名，对于 image/jpg 作为 MIME 类型，我们将使用 jpg 作为扩展名，如下所示：

9) 现在，我们将获取扩展名，我们将通过在 filename 函数中创建一个新常量来完成此操作。我们将使用 MIME_TYPE_MAP 常量，并在其中传递“file.mimetype”属性，如下所示：

10) 之后，我们将调用一个回调以将该信息传递给 multer。我们没有错误；这就是为什么我们传递 null 作为第一个参数的原因，并且我们将使用名称通过以下方式构造我们的名称作为第二个参数：

此回调函数应基于输入文件名、当前日期和正确的扩展名构造唯一的文件名。

11) 作为额外的安全层，在 destination 中，如果我们检测到没有这些 MIME 类型之一，我们必须抛出并返回一个错误。我们将通过创建一个新常量来实现这一点，即 isValid，我们将使用 MIME_TYPE_MAP，并在其中传递 "file.mimetype" 像

在这里，如果我们获得不属于 MIME_TYPE_MAP 的 MIME 类型，则 MIME_TYPE_MAP[file.mimetype] 将返回 nothing、undefined 或 null。

12) 因此，我们将使用 new 关键字和 Error() 方法创建一个新错误。我们将在 Error 函数中传递消息并检查 isValid 常量。如果它不为 null 或未定义，我们将设置 error 等于 null。否则，我们保留错误消息。在回调中，我们传递错误而不是 null 作为第一个参数，如下所示：

我们在上面配置了 multer。现在，它知道在哪里存储东西以及如何存储它们。

13) 现在，是时候使用 multer 了。我们将通过将其作为额外的中间件传递到 post 路由中来使用它。在 post 路由中，我们将首先传递路径，然后传递另一个函数，该函数将在我们的函数运行之前对请求执行某些操作。我们想使用 multer() 函数，在其中传递我们的配置，即 storage，然后我们将在此处调用 single()。并在函数中传递图像作为字符串。使用 a single() 方法意味着我们期望一个单独的文件。

这仅仅意味着 multer 现在将尝试从传入的请求中提取一个单独的文件，并将尝试在请求正文中的 image 属性上找到它。

那是后端设置，为了能够对其进行测试，我们需要在 Angular 代码中添加上传功能。我们将在下一节中执行此操作。