Laravel - Dropzone不上传所有文件

Question

我正在使用 Dropzone 在 Laravel 中上传文件。这是配置

<script type="text/javascript">
    Dropzone.options.dropzone =
        {
            maxFiles: 50,
            maxFilesize: 200,
            parallelUploads: 10,
            uploadMultiple: true,
            addRemoveLinks: true,
            autoProcessQueue:false,//the true is tried as well
            acceptedFiles: ".jpeg,.jpg,.png,.gif",
            success: function (file, response) {
                console.log(response);
            },
            error: function (file, response) {
                return false;
            }
        };
</script>

这是表格

{!! Form::open([ 'route' => [ 'images.multiUpload' ], 'files' => true, 'enctype' => 'multipart/form-data', 'class' => ' py-5 dropzone px-1 text-center w-100', 'id' => 'image-upload' ]) !!}
{{csrf_field()}}
{!! Form::close() !!} 

根据我在 processQueue function doesn't process all queued files #462 中看到的内容，听起来问题出在dropzone.js 的以下代码中

Dropzone.prototype.processQueue = function() {
  var i, parallelUploads, processingLength, queuedFiles;
  parallelUploads = this.options.parallelUploads;
  processingLength = this.getUploadingFiles().length;
  i = processingLength;
  if (processingLength >= parallelUploads) {
    return;
  }
  queuedFiles = this.getQueuedFiles();
  if (!(queuedFiles.length > 0)) {
    return;
  }
  if (this.options.uploadMultiple) {
    return this.processFiles(queuedFiles.slice(0, parallelUploads - processingLength));
  } else {
    while (i < parallelUploads) {
      if (!queuedFiles.length) {
        return;
      }
      this.processFile(queuedFiles.shift());
      i++;
    }
  }
};

所以我将此代码更改为以下代码（###### 附加到新行）

    Dropzone.prototype.processQueue = function () {
        var i, parallelUploads, processingLength, queuedFiles;
        parallelUploads = this.options.parallelUploads;
        parallelUploads = 20;//######
        processingLength = this.getUploadingFiles().length;
        i = processingLength;
        if (processingLength >= parallelUploads) {
            return;
        }
        queuedFiles = this.getQueuedFiles();
        if (!(queuedFiles.length > 0)) {
            return;
        }
        if (this.options.uploadMultiple) {
            return this.processFiles(queuedFiles.slice(0, parallelUploads - processingLength));
        } else {
            console.log(queuedFiles.length);//######
            while (queuedFiles.length > 0) {//######
                i = 0;//######
                while (i < parallelUploads) {
                    console.log(i);//######
                    if (!queuedFiles.length) {
                        return;
                    }
                    this.processFile(queuedFiles.shift());
                    i++;
                }
            }
        }
    };

如果我上传20 文件，console.log(queuedFiles.length); 显示20，console.log(i); 行显示从1 到20 的计数器，但它仍然上传 3 或 4 个文件，而不是所有文件。我能做什么？

Answer 1

给你，这段代码既有添加图像又有删除图像，它适用于来自后端的 API 调用和 ajax 调用。

var myDropzone = new Dropzone("div#dropzonePrescriptionImages", {
  url: "/appointment/prescription_multiple_file",
  // params: {
  //   _token: token,booking_id:booking_id,file_inc:file_inc,
  // },

sending: function(file, xhr, formData) {    
    formData.append("file_inc", file_inc);  //name and value
    formData.append("booking_id", booking_id); //name and value
    formData.append("_token",token);

},      
maxFiles:5,
  init: function() {

    this.on("maxfilesexceeded", function(file){
      this.removeFile(file);
      alert("Maximum 5 photos are allowed...!");
    });

    this.on("addedfile", function (file) {
      var removeButton = Dropzone.createElement("<button><i class='glyphicon glyphicon-trash'></i></button>");
      var _this = this;
      removeButton.addEventListener("click", function (e){
        e.preventDefault();
        e.stopPropagation();
        _this.removeFile(file);

      var i=0;
      var found=0;
      var len = Object.keys(files_array).length;
        for(i=0;i<len;i++){

        if(files_array.hasOwnProperty(i)){
          if(files_array[i]['name'] == file.name){

              $.ajax({
                type: 'GET',
                url:'/deletePrescriptionFiles',
                dataType: 'json',
                data:{path:files_array[i]['file_path']},
                async:false
              }).done(function(result1){
                  files_array[i]['file_path']=undefined;
                  files_array[i]['name']=undefined;
                  return;
              });
                 found==1;
                 break;
            }
             if(found==1){
              break;
            }
           }
            if(found==1){
              break;
            }

        }

        $('#files_array').val(JSON.stringify(files_array));

      });
      file.previewElement.appendChild(removeButton);
    });

    this.on("success", function(file, responseText) {
      files_array[file_inc]={};
      files_array[file_inc]['file_path']=responseText['file'];
      files_array[file_inc]['name']=file.name;
      file_inc++;


      $('#files_array').val(JSON.stringify(files_array));
    });
  },
});









Dropzone.options.myAwesomeDropzone = {
    paramName: "file", // The name that will be used to transfer the file
    maxFilesize: 15, // MB
    addRemoveLinks: true,
    acceptedFiles:".pdf,.jpg,.jpeg,.png,",

  };

Answer 2

发现问题。问题出在控制器上

public function multiUpload(Request $request)
{
    $imageName = time().'.'.$request->file->getClientOriginalExtension();
    $request->file->move(public_path('uploads\\temp'), $imageName);
    return response()->json(['success'=>$imageName]);
}

因为文件是同时上传的，所以他们取了相同的名字，所以被覆盖了！