使用 Vue-dropzone 示例的 Laravel VueJS 文件上传

在这一步中，我们将学习 Vue-dropzone，以便我们可以在 Laravel 中上传 VueJS 文件。如果我们尝试通过添加拖放选项来上传文件，那么选择 dropzone js 是一种很棒的方式。在我们的示例中，我们将使用 Vue dropzone 组件来上传 VueJS 文件。为此，我们可以使用 laravel 6、Laravel 7 和 Laravel 8。因此，在我们的 VueJS 脚本中，也可以使用 dropzone js。

为了上传 Vue.js dropzone 的文件或图像，我们应该遵循一个循序渐进的过程。首先，将下载 Laravel 5.6。之后，将初始化 VueJS。然后我们将安装 Vue-dropzone 的包。现在，将使用一个方法创建一个控制器和一个 post 路由。我们将使用控制器并在其上创建一个 POST 方法。之后，我们将通过编写以下代码来保存图像。如果我们想添加更多详细信息，我们也可以编写它。使用 Vue-dropzone 组件上传文件或图像的循序渐进过程如下

步骤 1

这是第一步，在这一步中，我们将安装 Laravel 5.6 项目。为此，我们将在我们的系统上打开命令提示符或终端，然后运行以下命令。

步骤 2

在第二步中，我们将创建路由。为此，将创建一个 post 路由，我们将在其上编写文件上传或图像的代码。因此，让我们获取该文件，然后像这样放置一个新的路由

routes/web.php

步骤 3

在第三步中，我们将创建控制器。现在我们将创建 formSubmit 方法和 ImageController。我们将使用此方法在服务器上存储文件或图像。因此，我们将在此方法内编写代码。为此，我们将创建一个像这样的控制器

app/Http/Controllers/ImageController.php

步骤 4

在这一步中，我们将进行 npm 配置。为此，我们将首先添加一个 VueJS 设置。之后，我们将安装 nmp，然后也安装 Vue-dropzone 的包。我们将使用我们的项目，之后我们将使用以下命令

安装 Vue

安装 npm

安装 Vue-dropzone

步骤 5

在第五步中，我们将编写组件和 app.js。为此，我们将设置 app.js 路径，然后编写代码。之后，我们将创建 VueJS 的组件。因此，我们将创建这两个文件并添加以下代码

resources/assets/js/app.js

resources/assets/js/components/ExampleComponent.Vue

步骤 6

在第六步中，我们将更新 welcome.blade.php 文件。为此，将使用 app/js 文件。因此，我们将通过编写以下代码来更新此文件

resources/views/welcome.blade.php

当我们运行以下命令时，app.js 文件将被更新

当我们运行上面的例子时，我们将得到以下输出