使用 Laravel 上传多张图片的 Dropzone 返回 null答案

【问题标题】：Multiple Image Upload Dropzone with Laravel returns null使用 Laravel 上传多张图片的 Dropzone 返回 null
【发布时间】：2019-10-23 14:31:29
【问题描述】：

这是我的表单和 JavaScript 代码。当我点击提交按钮时，电子邮件字段有一个值，但文件字段没有值。请帮忙！

<form action="{{ route('projects.store') }}" class="dropzone" method="post">

  {{ csrf_field() }}
  <div class="form-group {{ $errors->has('email') ? 'has-error': '' }}">
    <input type="text" name="email" placeholder="Enter email" class="form-control"><br>
    @if($errors->has('email'))
      <span class="help-block">
        {{ $errors->first('email') }}
      </span>
    @endif
  </div>

  <div class="fallback">
    <input name="file" type="file" multiple />
  </div>

  <input type="submit" name="" class="btn btn-danger" value="Submit" id="uploadfiles">
</form>

<script type="text/javascript">

  Dropzone.autoDiscover = false;

  var myDropzone = new Dropzone(".dropzone", 
  { 
    autoProcessQueue: false,
    parallelUploads: 10 // Number of files process at a time (default 2)
  });

  $('#uploadfiles').click(function()
  {
    myDropzone.processQueue();
 });
</script>

这是我的表单和 JavaScript 代码。当我点击提交按钮时，电子邮件字段有一个值，但文件字段没有值。请帮忙！。这是我的控制器方法

public function store(Request $request)
    {
        $this->validate($request, [
            'email' => 'required',
        ]);

        $email = $request->email;
        $file = $request->file('file');
        if($request->hasFile('file'))
        {
            dd('exist');
        }
        else
        {
            dd('no file');
        }

        exit();

        foreach($request->file('file') as $file)
        {
            $file_name = $file->getClientOriginalName();
            $file->move('/uploads', $file_name);
            dd('uploaded');
        }
    }

【问题讨论】：

标签： php laravel dropzone

【解决方案1】：

你必须在你的表单标签中添加enctype="multipart/form-data"才能上传文件。

还要在控制器中获取多个文件，您必须像这样将文件名更改为file[]。

<input name="file[]" type="file" multiple />

【讨论】：

感谢您的来信。但还是不行。我想知道是什么问题。

【解决方案2】：

当我尝试从 vue 上传时遇到了类似的问题。我通过在客户端将文件作为file[] 附加到formdata 解决了这个问题：

//var files is the actual input containing array of images uploaded
for (let i=0; i<files.length;i++){
  formdata.append('file[]', files[i]);
}

this.$axios.post(`api/files`, formdata, {
  headers: { "Content-type": "multipart/form-data"},
}).then((response) => {});

然后在服务器端跟随这个：

if ($files=$request->file('file')){
  foreach($files as $f){
    $path = $f->store('FileStorage', ['disk' => 'public']);
  }
// return 'success';
}

【讨论】：

谢谢，看看这个实现