我正在使用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个文件,而不是全部文件。我该怎么办?
答案 0 :(得分:2)
在这里,此代码同时具有添加图像和删除图像的功能,适用于从后端进行的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,",
};
答案 1 :(得分:0)
发现了问题。问题出在控制器上
public function multiUpload(Request $request)
{
$imageName = time().'.'.$request->file->getClientOriginalExtension();
$request->file->move(public_path('uploads\\temp'), $imageName);
return response()->json(['success'=>$imageName]);
}
因为文件是在同一时间上传的,所以它们具有相同的名称,因此它们被覆盖了!