我正在尝试将正常形式与vue2-dropzone结合在我正在使用的Rails 5应用程序中。
我想我几乎已经开始工作,但表格数据并没有与Dropzone图像一起发送。
我的 _form.html.erb 看起来有点像这样:
<%= form_for(listing, html: { multipart: true, id: 'listing_form', data: { listing: listing.to_json } }) do |f| %>
<div class="row">
<div class="col">
<div class="form-group">
<strong><%= f.label :address %></strong><br>
<%= f.text_field :address, class: 'form-control', 'v-model': 'address' %>
</div>
</div>
</div>
<!-- Other input fields here -->
<div class="row">
<div class="col">
<h2>Images</h3>
<vue-dropzone
ref="listingDropzone"
id="dropzone"
@vdropzone-success-multiple="listingRedirect"
:options="dropzoneOptions">
</vue-dropzone>
</div>
</div>
<%= f.submit class: 'btn btn-success', 'v-on:click.stop.prevent': 'submitListing' %>
<% end %>
我使用我在Vue方法中定义的submitListing
提交数据。反过来,这会调用Dropzone的processQueue
来处理提交。然后调用listingRedirect
以在成功时执行重定向。
if(document.getElementById('listing-multistep') != null) {
Vue.http.headers.common['X-CSRF-Token'] = document.querySelector('input[name="authenticity_token"]').getAttribute('value');
var listingForm = document.getElementById('listing_form');
var listing = JSON.parse(listingForm.dataset.listing);
const myForm = new Vue({
el: '#listing-multistep',
components: {
vueDropzone: vue2Dropzone
},
data: function () {
return {
id: listing.id,
// Other options here...
address: listing.address,
dropzoneOptions: {
url: '/listings',
method: 'post',
acceptedFiles: 'image/*',
uploadMultiple: true,
autoProcessQueue: false, // Dropzone should wait for the user to click a button to upload
parallelUploads: 15, // Dropzone should upload all files at once (including the form data) not all files individually
maxFiles: 15, // this means that they shouldn't be split up in chunks
addRemoveLinks: true,
thumbnailWidth: 150,
maxFilesize: 5,
dictDefaultMessage: "<i class='fa fa-cloud-upload'></i> Drop files here to upload (max. 15 files)",
headers: { 'X-CSRF-Token': Vue.http.headers.common['X-CSRF-Token'] }
}
}
},
mounted: function() {
// Dropzone actually performs the form submission.
// Make a PUT request if the listing id exists.
if(this.id !== null) {
this.dropzoneOptions['url'] = `/listings/${this.id}`
this.dropzoneOptions['method'] = 'put'
}
},
methods: {
submitListing: function() {
// Do some form processing...
// listingObj contains the rest of the form data.
// I'd like to send this object across in the payload.
var listingObj = {
address: this.address,
// more fields...
}
this.$refs.listingDropzone.processQueue()
},
listingRedirect: function(files, response) {
window.location = `/listings/${response.body.id}`
}
}
})
我可以查看控制器中发送的图像。问题是没有发送其他表单数据。我在这里做错了什么?
提前致谢!