这是我正在执行的dropzone代码
var myDropzone = new Dropzone("#my-dropzone",
{
url: "/opd/addMedicalRecord",
autoProcessQueue: false,
parallelUploads: 20,
uploadMultiple: 20,
maxFiles: 20,
paramName: 'file',
headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
init: function()
{
var submitButton = document.querySelector("button#modal_addRecord")
myDropzone = this; // closure
submitButton.addEventListener("click", function()
{
myDropzone.processQueue(); // Tell Dropzone to process all queued files.
alert("Called Process Queue");
});
// You might want to show the submit button only when
// files are dropped here:
this.on("addedfile", function()
{
// Show submit button here and/or inform user to click it.
// alert("Called Added File");
});
this.on('uploadprogress', function(file, progress, bytesSent, formData)
{
formData.append('reportType', $('input[name=modal_reportType]:checked', 'div#addNewReport').val());
formData.append('reportTitle', $("#modal_reportTitle").val());
formData.append('reportInvestigationDate', $("#modal_investigationDate").val());
formData.append('reportNote', $("#modal_notes").val());
// console.log('File is ' + file);
// console.log('Progress is ' + file.upload.progress);
// console.log('Size is ' + file.upload.bytesSent);
// $("#uploadProgress").css("width",Math.ceil(file.upload.progress) + "%");
});
this.on('complete',function(file)
{
// $("#full").modal('hide');
$("#uploadProgress").css("width","0%");
myDropzone.removeAllFiles();
});
}
});
这是我的Html代码：
<div class="modal fade" id="full" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div enctype="multipart/form-data" id="addNewReport" onSubmit="return false;">
<div class="modal-content">
<div class="modal-header green-modal">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Add new report for Abhishek Bharambe</h4>
</div>
<div class="modal-body">
{{-- <form onSubmit="return false;" enctype="multipart/form-data" id="addNewReport"> --}}
<div class="row mt-15"> {{-- Report Type--}}
<div class="col-md-8 col-md-offset-2">
<div class="form-group form-md-radios">
<label>Select Report Type</label>
<div class="md-radio-inline">
<div id="r_labreports_r_a" class="md-radio">
<input type="radio" id="modal_labReports" name="modal_reportType" value="lab" class="md-radiobtn">
<label for="modal_labReports"> <span class="inc"></span> <span class="check"></span> <span class="box"></span> Lab Reports </label>
</div>
<div id="r_imaging_r_a" class="md-radio">
<input type="radio" id="modal_labImaging" name="modal_reportType" value="image" class="md-radiobtn">
<label for="modal_labImaging"> <span class="inc"></span> <span class="check"></span> <span class="box"></span> Imaging </label>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-15"> {{-- Report Title--}}
<div class="col-md-8 col-md-offset-2">
<div class="form-group">
<div class="input-group"> <span class="input-group-addon input-circle-left capsule-lightblue">
<i class="fa fa-hospital-o blue-icon-font"></i>
</span>
<input type="text" class="typeahead-newrecord form-control input-circle-right" id="modal_reportTitle" placeholder="Enter Report Title" name="reportTitle">
</div>
</div>
</div>
</div>
<div class="row mt-15">
<div class="col-md-8 col-md-offset-2">
<div class="form-group">
<div class="input-group">
<span class="5pw input-group-addon input-circle-left capsule-lightblue">
<i class="fa fa-calendar blue-icon-font"></i>
</span>
<input name="date" class="pw100 input-circle-right form-control form-control-inline input-medium date-picker" form-input size="16" type="text" id="modal_investigationDate" data-date-format="dd-mm-yyyy" placeholder="Date of Investigation (Optional)" /> </div>
</div>
</div>
</div>
<div class="row mb-25">
<form class="dropzone dropzone-file-area" multiple name="file[]" id="my-dropzone" accept=accept="image/*, .pdf, .doc, .docx, .xls, .xlsx" style="width: 500px; margin-top: 50px;">
<h3 class="sbold">Drop Report related files here or click to upload</h3>
<p> You can upload images (.jpg, .jpeg, .png) or documents (.pdf, .docx, .doc, .xls, .xlsx) of the report. </p>
</form>
<br>
<br>
<br>
<div class="col-md-9 col-md-offset-1">
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%" id="uploadProgress">
<span class="sr-only"> 0% Uploaded </span>
</div>
</div>
</div>
<a class="btn hide" id="mbtn">Upload</a>
</div>
<div class="row">{{--Notes--}}
<div style="margin-top: 20px;"></div>
<div class="col-md-8 col-md-offset-2">
<div class="form-group form-md-line-input form-md-floating-label">
<textarea class="form-control" id="modal_notes" rows="2" cols="2" name="modal_notes"></textarea>
<label for="mpdal_notes">Notes</label>
<span class="help-block">Additional Notes Here</span>
</div>
</div>
</div>
{{-- </form> --}}
</div>
<div class="modal-footer">
<div class="row">
{{-- Submit Button --}}
<div class="col-md-8 col-xs-12 col-sm-12 col-md-offset-2">
<div class="col-md-6 col-sm-6 col-xs-6 nopad">
<button id="modal_addRecord" class="fwb btn btn-circle green-meadow">
<i class="fa fa-check"></i> Add Record
</button>
</div>
<div class="col-md-6 col-sm-6 col-xs-6 nopad">
<button type="button" class="fwb btn btn-circle btn-outline dark" data-dismiss="modal"><i class="fa fa-close"></i> Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
我是Laravel后端我正在显示数据以查看响应：
print_r($request->all());
exit();
问题是我还希望通过文件上传发送剩余的表单数据。在目前的情况下，有一个成功的文件上传它也到达服务器，但剩余的表单数据没有被发布到服务器什么是我无法跟踪它的错误？
在dropzone部分附加数据时，它会给出一个像=＆gt;的错误。 Uncaught TypeError: Cannot read property 'push' of undefined
答案 0 :(得分：0)
而不是uploadprogress你应该使用sending .Dropzone uploadprogress不会使用formData。阅读更多here，查看事件列表，了解每个人所做的事情。
以下是一个例子：
myDropzone.on('sending', function(file, xhr, formData){...
编辑。
file, xhr, formData 添加上面的烙印线形式，然后添加你的formData ....然后将其处理以处理队列myDropzone.processQueue();
答案 1 :(得分：0)
我使用vue2-dropzone 3.0.3以下是我的代码 在vuejs模板上：
<vue-dropzone :options="dropzoneOptions">
和
export default {
....
dropzoneOptions: { url: this.myUrl, method: 'POST', params: {'userId':
1, 'userName': 'TranVoNB'}, }
.....
（我使用params添加其他参数）
并在Laravel控制器上：
$request->get('userId') //TranVoNB