我正在尝试将数据库中的图像加载到dropzone并正确格式化文件，以便我可以重新提交回数据库。我也使用jQuery Sortable，因为我希望它们按顺序提交。
我正在使用Laravel刀片模板。目前，当我提交表格时，我得到的是空值。在控制器中，我正在使用$request->file('file');我也尝试过$request->file;我也曾经尝试过$request->file[0]和$request->file('file')[0];
我昨天在某个地方emit('addedfile')到emit('thumbnail')上读到一些东西，它们实际上并不是队列中的物理图像，但是如您所见，我正在手动添加它们，所以它们不应该提交processQueue()像普通的排队文件一样？
为清楚起见，图像在放置区中正确显示；我只是不能重新提交他们。
以下是我的JavaScript代码：
<script>
Dropzone.autoDiscover = false;
var mydropzone = new Dropzone('.project-dropzone', {
url: "{{route('projects.update', $project->id)}}",
paramName: "file",
maxFileSize: 2,
method: "PATCH",
autoQueue: true,
autoProcessQueue: false,
headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
parallelUploads: 10,
addRemoveLinks: true,
uploadMultiple: true,
init: function() {
dp = this;
// Add the files from the sever to the dropzone
@foreach($project->media as $image)
var currentFile = {
name: "{{$image->file}}",
previewElement: "div.dz-preview.dz-complete.dz-image-preview.ui-sortable-handle",
previewTemplate: "div.dz-preview.dz-complete.dz-image-preview.ui-sortable-handle",
type: 'image/jpeg',
accepted: true,
status: "queued",
upload: {
chunked: false,
filename: "{{$project->name}}",
totalChunkCount: 1,
progress: 0
},
id: {{$image->id}}
};
dp.emit("addedfile", currentFile);
dp.emit("thumbnail", currentFile, "/uploads/{{$image->file}}");
dp.files.push(currentFile);
dp.emit("complete", currentFile);
@endforeach
// Add these to the queue
dp.QUEUED = [];
dp.QUEUED.push(dp.files);
document.querySelector('.submit-project').addEventListener('click', function(e) {
// If there are any queued files in the dropzone start using the javascript implementation
e.preventDefault();
// If there are any errors displayed about the form validation from the previous submit, remove it and set new ones
var errorsDisplayed = document.querySelector('.project-validation-errors');
if(errorsDisplayed) {
errorsDisplayed.remove();
}
// Validate the form
var bool = validateForm();
// If the form validates, process the queue
if(bool) {
dp.processQueue();
}
});
dp.on("sending", function(file, xhr, formData) {
formData.append("title", mydropzone.projectTitle);
formData.append("body", mydropzone.projectBody);
formData.append("project_name", mydropzone.projectName);
formData.append("project_url", mydropzone.projectUrl);
formData.append("project_category", mydropzone.projectCat);
formData.append("project_skills", mydropzone.projectSkills);
});
dp.on("addedfile", function(file) {
console.log(dp.QUEUED);
var element = document.querySelector('.project-dropzone p');
if(element) {
element.remove();
}
});
dp.on("success", function() {
// window.location.href = "";
});
var validateForm = function() {
var errors = [];
var projectTitle, projectBody, projectName, projectUrl, projectCat, projectSkills;
mydropzone.projectTitle = document.querySelector('.project-title').value;
if(mydropzone.projectTitle == "") {
errors.push('There is no project title');
}
mydropzone.projectBody = document.querySelector('.project-body').value;
if(mydropzone.projectBody == "") {
errors.push('There is no project body text');
}
mydropzone.projectName = document.querySelector('.project-name').value;
if(mydropzone.projectName == "") {
errors.push('There is no project name');
}
mydropzone.projectUrl = document.querySelector('.project-url').value;
if(mydropzone.projectUrl == "") {
errors.push('There is no project URL');
}
mydropzone.projectCat = document.querySelector('.project-cat').value;
if(mydropzone.projectCat == "") {
errors.push('There are no project categories');
}
mydropzone.projectSkills = document.querySelector('.project-skills').value;
if(mydropzone.projectSkills == "") {
errors.push('There are no project skills');
}
// If there are no validation errors
if(errors.length == 0) {
return true;
}
else {
// Display the errors
var html = "<div class='alert alert-danger clearfix project-validation-errors'><ul class='m-0 pl-3'>";
for(i = 0; i < errors.length; i++) {
html += "<li>"+errors[i]+"</li>";
}
html += "</div>";
document.querySelector('.page-title').insertAdjacentHTML('afterend', html);
}
};
}
});
</script>
在添加的文件上，我可以console.log(dp.QUEUED)展示当放入文件时，该文件在QUEUED对象中的样子：
[Array(3)]
0: Array(3)
0:
accepted: true
id: 3
name: "20190125-unnamed-man4.jpg"
previewElement: div.dz-preview.dz-complete.dz-image-preview.ui-sortable-handle
previewTemplate: div.dz-preview.dz-complete.dz-image-preview.ui-sortable-handle
status: "queued"
type: "image/jpeg"
upload: {chunked: false, filename: "", totalChunkCount: 1, progress: 0}
_removeLink: a.dz-remove
__proto__: Object
1: {name: "26055793_10154858018501652_2836007284381890198_n.jpg", previewElement: div.dz-preview.dz-complete.dz-image-preview.ui-sortable-handle, previewTemplate: div.dz-preview.dz-complete.dz-image-preview.ui-sortable-handle, type: "image/jpeg", accepted: true, …}
2: File(58227)
accepted: true
dataURL: "data:image/jpeg;base64,/9j/4gIcSUNDX1BST0ZJTEUAAQE"
height: 720
lastModified: 1545932196105
lastModifiedDate: Thu Dec 27 2018 17:36:36 GMT+0000 (Greenwich Mean Time) {}
name: "26055793_10154858018501652_2836007284381890198_n.jpg"
previewElement: div.dz-preview.dz-image-preview
previewTemplate: div.dz-preview.dz-image-preview
size: 58227
status: "queued"
type: "image/jpeg"
upload: {uuid: "d66814d9-aae5-4bfd-bcd6-c1e4a500913d", progress: 0, total: 58227, bytesSent: 0, filename: "26055793_10154858018501652_2836007284381890198_n.jpg", …}
webkitRelativePath: ""
width: 960
_removeLink: a.dz-remove
__proto__: File
length: 3
__proto__: Array(0)
length: 1
__proto__: Array(0)
0和1是从服务器自动加载的文件，2是我放入的文件。
我不明白所放置的文件如何以File（58227）开头，然后如何通过对象属性（例如，accepted，filename等）？我没有正确设置文件对象吗？还是我不正确地在控制器中捡起来了？
该问题的另一个答案和另一种帮助我的方法是，如果有人在将图像手动添加到dropzone方面有任何经验，因为查看dropzone代码具有诸如添加文件，enqueueFile之类的功能。
将文件放到dropzone区域后，该类显然在做一些可以通过调用正确的类手动启动的操作。
欢呼