javascript - 使用 Dropzone 和 Laravel 上传产品

Question

我想使用 Dropzone 上传包含多个图像的产品，我有一个包含其他字段(如价格、名称等)的表单。我看过其他教程，但他们只上传图像，而不上传具有其他字段(价格、名称)的图像一次。我已经设置了显示预览的 Dropzone，但如果我提交按钮，我会收到验证请输入产品图片。如何使用 Dropzone 将图像传递到 Controller ？

Controller

 public function store(Request $request)
 {
  $formInput=$request->except('filename');

    $product = product::create(array_merge($formInput, [
        'user_id' => Auth::user()->id
    ]));
    foreach ($request->file as $photo) {
        $filename = $photo->store('public/photos');
        ProductsPhoto::create([
            'product_id' => $product->id,
            'filename' => $filename
        ]);
     }
 }

Blade

//The form

 <div class="panel-body">
   <form>
    @csrf
     <input type="hidden" value="{{csrf_token()}}" id="token"/>
  <label for="pro_name">Name</label>
  <input type="text" class="form-control" name="pro_name" id="pro_name" placeholder="Enter product name">

    <label for="pro_price">Price</label>
     <input type="text" class="form-control" name="pro_price" id="pro_price" placeholder="Enter price">

 <label for="photos">Choose 5 Images</label>
 <div class="needsclick dropzone" id="document-dropzone">  // Display images preview

  </div>

 <input type="submit" class="btn btn-primary" value="Submit" id="btn"/>

</div>

Ajax

   //This is how I submit the form
   <script>

    var token = $("#token").val();
    $(document).ready(function(){
        $("#btn").click(function (e) {
            e.preventDefault();
            $("#loading").show();
            var url = '{{ route('product.store') }}';
            var form = $('form')[0]; // You need to use standard javascript object here
            var formData = new FormData(form);
            formData.append('_token', token); // adding token
            $.ajax({
                url: url,
                data: formData, //just that without variables
                type: 'POST',
                cache: false,
                contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)
                processData: false, // NEEDED, DON'T OMIT THIS
                success:function(data){
                if($.isEmptyObject(data.error)){
                $("#msg").html("Product has been added successfull");
                $("#msg").fadeOut(3000);
                 window.location.href =  "<?php echo url('seller/product') ?>";
                 $("#loading").hide();
                 }
                 else{

                        printErrorMsg(data.error);

                        }
                }
            });
            function printErrorMsg (msg) {
            $("#loading").hide();
            $(".print-error-msg").find("ul").html('');
            $(".print-error-msg").css('display','block');
            $.each( msg, function( key, value ) {
                $(".print-error-msg").find("ul").append('<li>'+value+'</li>');
            });
            }
        });

    });

    var uploadedDocumentMap = {}
Dropzone.options.documentDropzone = {
  url: '{{ route('product.store') }}',
  maxFilesize: 10, // MB
  addRemoveLinks: true,
  headers: {
    'X-CSRF-TOKEN': "{{ csrf_token() }}"
  },
  success: function (file, response) {
    $('form').append('<input type="hidden" name="document[]" value="' + file.name + '">')
    uploadedDocumentMap[file.name] = response.name
  },
  removedfile: function (file) {
    file.previewElement.remove()
    var name = ''
    if (typeof file.file_name !== 'undefined') {
      name = file.file_name
    } else {
      name = uploadedDocumentMap[file.name]
    }
    $('form').find('input[name="document[]"][value="' + name +  '"]').remove()
  },
  init: function () {
    @if(isset($project) && $project->document)
      var files =
        {!! json_encode($project->document) !!}
      for (var i in files) {
        var file = files[i]
        this.options.addedfile.call(this, file)
        file.previewElement.classList.add('dz-complete')
        $('form').append('<input type="hidden" name="document[]"  value="' + file.file_name + '">')
      }
    @endif
  }
  }
</script>

Answer 1

您的代码和概念中的某些内容不正确(至少在我看来):

1. 您需要阻止 #btn 的默认行为因为你需要拦截表单提交。否则，表单将仅作为 GET 提交。请求(默认行为是什么)。

$("#btn").click(function (e) {
  e.preventDefault();
  // ...
}

<form>元素未关闭。此外，不要覆盖 _ token在你的 JavaScript 中，只需添加 @csrf到表格。 Lavel 和 jQuery 将为您处理一切。

<form>
  @csrf

我想我明白你现在想要实现的目标。 Dropzone 直接上传(= POST 请求)文件，因此您需要一个单独的路由(或另一个代码分支)来处理文件上传。然后，您可以获取之前上传的文件的文件名并将其附加为 hidden输入字段如下所示:

success: function (file, response) {
  $('form').append('<input type="hidden" name="document[]" value="' + file.name + '">')
},

您将在 Controller 的方法中收到的是 pro_name , pro_price和一个数组 document包含上传文件的名称。按照您的逻辑，该文件必须已存在于存储中，因为它是通过 Dropzone 操作上传的。然后您可以保存 filename到数据库或其他任何内容，并将其用作稍后访问文件的引用。无论如何，我不建议使用客户端提供的文件名进行存储，因为它可能不是唯一的。 Laravel 为这种情况提供了很多有用的工具:https://laravel.com/docs/5.7/filesystem#file-uploads