Angular 9/8 中的 Dropzone 图像上传

在本节中，我们将学习如何在 Angular 9 或 angular 8 中使用 dropzone 上传图像。我们还将看到使用拖放上传图像。在我们的示例中，我们将使用 angular 9/8 中的 ngx dropzone。

在我们的 angular 9 应用程序中，我们将使用 dropzone 的组件来简单地上传多个图像。为了进行拖放图像上传，我们将使用 ngx-dropzone npm 包。在下面的应用程序中，我们将使用 dropzone js 上传图像。我们还将使用 php 创建 Web 服务。我们可以使用 API 在 serve0072 上上传一个或多个图像或文件。上传图像的逐步过程如下

步骤 1

在此步骤中，我们将**创建新应用**。为此，我们将使用以下命令来创建我们的 angular 应用。

步骤 2

在第二步中，我们将**安装 ngx-dropsone 包**。在我们的示例中，我们需要 angular js 在 angular 中。为此，我们需要安装 ngx-dropzone 包。将运行以下命令来安装它

步骤 3

在第三步中，我们将**导入模块**。在下面的示例中，我们将使用 app.module.ts 文件，然后我们将为此文件导入两个模块，即 NgxDropzone Module 和 HttpClientModule。我们将使用以下代码导入两者

src/app/app.module.ts

步骤 4

在此步骤中，我们将**更新视图文件**。为了更新，我们将使用我们的 html 文件。我们将使用我们的视图文件并简单地创建 dropzone 的组件。为此，我们将放置如下所述的代码

src/app/app.component.html

步骤 5

在此步骤中，我们将**使用组件 ts 文件**。我们将使用 HttpClient 并更新名为 component.ts 的文件。之后，我们将通过编写方法来选择图像。为此，我们将使用本地 api 文件的 url，即 'https://:8001/upload.php'。因此，我们将更新以下代码。

src/app/app.component.ts

现在我们的以上示例已准备好运行。我们将使用 PHP，以便我们可以创建 api 文件。在我们的示例中，我们将使用 upload 文件夹来创建一个 update.php 文件。之后，我们将使用不同的端口运行它并调用它。以下命令用于创建一个 upload.php 文件。

upload.php

现在我们的两个代码都已准备好运行。我们可以使用以下命令在我们的 angular 应用上运行它。

之后，我们将像这样运行 PHP API

当我们运行此 api 时，我们将获得以下输出