使用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项目。为此，我们将在系统上打开命令提示符或终端，然后运行以下命令。

composer create-project --prefer-dist laravel/laravel blog

步骤2：

在第二步中，我们将要创建路由。为此，我们将创建一个Post路由，并在其上编写文件上传或图像的代码。所以让我们拿到那个文件，然后添加一个新的路由，就像这样：

routes/web.php

Route::post('formSubmit','ImageController@formSubmit');

步骤3：

在第三步中，我们将要创建控制器。现在我们将创建formSubmit方法和ImageController。我们将使用这个方法来将文件或图像存储在服务器上。所以我们将在这个方法中编写代码。为此，我们将创建一个控制器，如下所示：

app/Http/Controllers/ImageController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ImageController extends Controller
{
    /**
     * success response method.
     *
     * @return \Illuminate\Http\Response
     */
    public function formSubmit(Request  $request) {$ imageName = time().'.'. $request->file->getClientOriginalExtension();$ request->file->move(public_path('images'), $imageName);

        return response()->json(['success'=>'You have successfully upload file.']);
    }
}

步骤4：

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

安装Vue：

php artisan preset Vue

安装npm：

npm install

安装Vue-dropzone：

npm install Vue2-dropzone

步骤5：

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

resources/assets/js/app.js:

require('./bootstrap');

window.Vue = require('Vue');

Vue.component('example-component', require('./components/ExampleComponent.Vue'));

const app = new Vue({
    el: '#app'
});

将下面的英文翻译成中文，不解释，保留HTML格式：

resources/assets/js/components/ExampleComponent.Vue:

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Example Component</div>
                    <div class="card-body">
                        I'm an example component.
                        <Vue-dropzone ref="myVueDropzone" id="dropzone" :options="dropzoneOptions"></Vue-dropzone>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

import Vue2Dropzone from 'Vue2-dropzone'
import 'Vue2-dropzone/dist/Vue2Dropzone.min.css'

    export default {
     components: {
        VueDropzone: Vue2Dropzone
      },
      data: function () {
        return {
          dropzoneOptions: {
              url: '/formSubmit',
              headers: {
                "X-CSRF-TOKEN": document.head.querySelector("[name=csrf-token]").content
               }
          }
        }
      },
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

步骤6:

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

resources/views/welcome.blade.php：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title> Example of Vue JS File Upload Using vue-dropzone in Laravel </title>
        <link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div id="app">
            <example-component></example-component>
        </div>
        <script src="{{asset('js/app.js')}}" ></script>
    </body>
</html>

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