我在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"
}
答案 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-TOKEN
和X-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
中的html
为dropzoneFileUpload
而非myAwesomeDropzone
,read more。