1

我一直在 Laravel 项目中使用标准 HTML POST 进行文件上传，并希望我们使用 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"
}
4

2 回答 2

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-TOKEN和X-Requested-With标题。我也给出paramName了选项，在我给出这个选项之前，我的Request对象无法捕获 Dropzone 发送的任何文件。希望这可以帮助。

于 2018-01-26T12:29:10.953 回答
0

你id在设置选项时用错了。在您的html代码中，您有以下标记：

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

但是在您的js代码中，您使用了以下代码：

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

在这种情况下，您应该改用以下内容：

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

请注意，id在你html的dropzoneFileUpload不是myAwesomeDropzone，阅读更多。

于 2018-01-26T15:59:45.550 回答