2

我正在尝试在我正在开发的 Rails 5 应用程序中将普通形式与 vue2-dropzone 结合起来。

我想我几乎已经让它工作了，但表单数据没有与 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 %>

我正在使用submitListing我在 Vue 方法中定义的数据提交数据。反过来，这会调用processQueue处理提交的 Dropzone。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}`
      }
    }
  })

我可以看到控制器中发送的图像。问题是没有发送任何其他表单数据。我在这里做错了什么？

提前致谢！

4

0 回答 0