Laravel 5.5 - не удается получить загруженные файлы Dropzone в FileBag

Я использовал стандартный HTML POST в проекте Laravel для загрузки файлов и хочу, чтобы мы использовали Dropzone.

Я попытался просмотреть документацию для Dropzone и онлайн-примеры реализации Laravel, но я не могу получить простую публикацию файла для загрузки в заголовки POST.

Таким образом, Laravel FileBag остается пустым, и я не могу понять, почему. Выгрузка $ _FILE не приводит к передаче файлов в заголовки. Помимо этого, с точки зрения браузера поле ввода для dropzone отображается нормально, оно реагирует и не отображает ошибок при загрузке файла.

Любая помощь будет оценена. Код, урезанный до основ:

Мастер Клинок:

    <!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"
}

php laravel dropzone laravel-5.5
person stoneferry    schedule 26.01.2018    source источник
comment
Я забыл упомянуть. Поле ввода Dropzone отображается нормально, запрашивает файл, выдает окно загрузки браузера при щелчке левой кнопкой мыши и, похоже, загружает файл без ошибок (нет ошибок во время загрузки при мониторинге консоли браузера).   -  person stoneferry    schedule 26.01.2018

Ответы (2)


arrow_upward
0
arrow_downward

Вот мой рабочий пример:

Маршруты

<?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-TOKEN и X-Requested-With. Я также даю параметр paramName, прежде чем я предоставлю этот параметр, мой объект Request не может поймать ни один файл, отправленный Dropzone. Надеюсь это поможет.

person krisanalfa    schedule 26.01.2018
comment
Я заменил ваш css / app.css на dropzone.css и js / app.js на dropzone.js - к сожалению, такое же поведение ... Стиль Dropzone показывает и принимает ввод файла, но затем ничего не передается в Request и FileBag. .. Есть еще предложения? - Стандартный входной файл HTML работает нормально. - person stoneferry; 26.01.2018

arrow_upward
0
arrow_downward

Вы использовали неправильный id при настройке параметров. В вашем html коде используется следующая разметка:

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

Но в вашем js коде вы использовали следующий код:

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

В этом случае вместо этого следует использовать следующее:

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

Обратите внимание, что id в вашем html это dropzoneFileUpload, а не myAwesomeDropzone, подробнее.

person The Alpha    schedule 26.01.2018
comment
Спасибо за ответ, к сожалению, убедившись, что идентификаторы верны, он по-прежнему не работает. Поле ввода Dropbox отображается и, кажется, загружает файл, но при отправке POST ничего не передается в filebag. - person stoneferry; 27.01.2018