Laravel 5.5 - 无法将Dropzone上载的文件导入FileBag

时间:2018-01-26 10:32:02

标签: php laravel laravel-5.5 dropzone

我在Laravel项目中使用标准HTML POST进行文件上传,并希望我们使用Dropzone。

我已经尝试查看Dropzone的文档和Laravel实现的在线示例,但是,我无法将一个简单的文件帖子上传到POST标头中。

因此,Laravel FileBag仍然是空的,我无法弄清楚原因。转储$ _FILE会导致没有文件传入Headers。除此之外,从浏览器的角度来看,dropzone的输入框显示正常,它具有响应性,并且在上传文件时不会显示错误。

任何帮助将不胜感激。代码被剥离了基础:

Master Blade:

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="/dropzone.css">
    <script src="/dropzone.js"></script>

    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="icon" href="../../favicon.ico">

  </head>

  <body>


      <script type="text/javascript">
            var baseUrl = "{{ url('/testUpload') }}";
            var token = "{{ Session::Token() }}";
            Dropzone.autoDiscover = false;
             var myDropzone = new Dropzone("div#dropzoneFileUpload", { 
                 url: baseUrl,
                 params: {
                    _token: token
                  }
             });
             Dropzone.options.myAwesomeDropzone = {
                paramName: "file", // The name that will be used to transfer the file
                maxFilesize: 2, // MB
                addRemoveLinks: true,
                accept: function(file, done) {

                },
              };
         </script>

  </body>
</html>

刀片:

@extends("testmaster")

  <form action="/testUpload" enctype="multipart/form-data" method="post" class="dropzone">

    {{ csrf_field() }}

    <div class="container">
      <div class="dropzone" id="dropzoneFileUpload">
      </div>
    </div>

    <input type="submit" value="Submit">

  </form>

控制器:

public function testUpload(Request $request)
{
    dd($request);
}

路线:

Route::get('/test','HomeController@test');
Route::post('/testUpload','HomeController@testUpload');

结果请求:

Request {#38 ▼
  #json: null
  #convertedFiles: null
  #userResolver: Closure {#398 ▶}
  #routeResolver: Closure {#399 ▶}
  +attributes: ParameterBag {#40 ▶}
  +request: ParameterBag {#39 ▶}
  +query: ParameterBag {#46 ▶}
  +server: ServerBag {#42 ▶}
  +files: FileBag {#43 ▼
    #parameters: []
  }
  +cookies: ParameterBag {#41 ▶}
  +headers: HeaderBag {#44 ▶}
  #content: null
  #languages: null
  #charsets: null
  #encodings: null
  #acceptableContentTypes: null
  #pathInfo: "/testUpload"
  #requestUri: "/testUpload"
  #baseUrl: ""
  #basePath: null
  #method: "POST"
  #format: null
  #session: Store {#440 ▶}
  #locale: null
  #defaultLocale: "en"
  -isHostValid: true
  -isForwardedValid: true
  basePath: ""
  format: "html"
}

2 个答案:

答案 0 :(得分:0)

这是我的工作示例:

路线

<?php // routes/web.php

Route::view('/dropzone', 'dropzone');
Route::post('/upload', 'ImageController@upload');

模板

{{-- dropzone.blade.php --}}
@extends('layouts.app')

@section('content')
<div class="container">
    <form action="/upload" enctype="multipart/form-data" method="POST" class="dropzone">
        {{ csrf_field() }}

        <div class="form-group">
            <div class="dropzone" id="dropzoneFileUpload"></div>
        </div>
    </form>
</div>
@stop

@section('script')
<script>
const baseUrl = "{{ url('/upload') }}";
const dropzoneFileUpload = new Dropzone("div#dropzoneFileUpload", {
    url: baseUrl,
    method: 'POST',
    withCredentials: true,
    paramName: 'file', // The name that will be used to transfer the file
    maxFilesize: 2, // MB
    addRemoveLinks: true,
    acceptedFiles: 'image/*',
    headers: {
        'X-CSRF-TOKEN': document.head.querySelector('meta[name="csrf-token"]').content,
        'X-Requested-With': 'XMLHttpRequest',
    }
});
</script>
@stop
{{--  layouts/app.blade.php  --}}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Document</title>

    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
    @yield('style')
</head>
<body>
    <div id="app">
        @yield('content')
    </div>

    <script src="{{ mix('js/app.js') }}"></script>
    @yield('script')
</body>
</html>

控制器

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ImageController extends Controller
{
    public function upload(Request $request)
    {
        return $request->file('file');
    }
}

请注意我的Dropzone配置,我包含X-CSRF-TOKENX-Requested-With标头。我也提供paramName选项,在我提供此选项之前,我的Request对象无法捕获Dropzone发送的任何文件。希望这会有所帮助。

答案 1 :(得分:0)

您在设置选项时使用了错误的id。在您的html代码中,您有以下标记:

<div class="container">
  <div class="dropzone" id="dropzoneFileUpload">
  </div>
</div>

但在您的js代码中,您使用了以下代码:

Dropzone.options.myAwesomeDropzone = {
    //...
}

在这种情况下,您应该使用以下内容:

Dropzone.options.dropzoneFileUpload = {
    //...
}

请注意,id中的htmldropzoneFileUpload而非myAwesomeDropzoneread more