dropzone 没有正确发送对象作为参数

Question

我有一个 from 和一个 dropzone，当用户点击添加按钮时，如果表单完成，数据将使用 dropzone 选项通过 xhr 发送。

html：

<div id="fp_form">
  <div class="row">
    <div class="form-group col-xs-12 col-md-4">
      <label class="label-control"><%= t :restaurant %></label>
      <span class="fa fa-star mandatory"></span>
      <select class="form-control fpInput restaurant"></select>
    </div>
    <div class="form-group col-xs-12 col-md-4">
      <label class="label-control"><%= t :vendor %></label>
      <span class="fa fa-star mandatory"></span>
      <select class="form-control fpInput vendor"></select>
    </div>
    <div class="form-group col-xs-12 col-md-4">
      <label class="label-control"><%= t :meal %></label>
      <span class="fa fa-star mandatory"></span>
      <select class="form-control fpInput meal"></select>
    </div>
  </div>
  <div class="row">
    <div class="form-group col-xs-12 col-md-4">
      <label class="label-control"><%= t :food %></label>
      <span class="fa fa-star mandatory"></span>
      <select class="form-control fpInput" id="foodLS"></select>
    </div>
    <div class="form-group col-xs-12 col-md-4">
      <label class="label-control"><%= t :fa_food_material %></label>
      <span class="fa fa-star mandatory"></span>
      <textarea type="text" class="form-control fpInput" id="fa_material"></textarea>
    </div>
    <div class="form-group col-xs-12 col-md-4">
      <label class="label-control"><%= t :en_food_material %></label>
      <span class="fa fa-star mandatory"></span>
      <textarea type="text" class="form-control fpInput" id="en_material"></textarea>
    </div>
  </div>
  <div class="row">
    <div class="form-group col-xs-12">
      <div class="dropzone" id="foodDZ">
        <div class="dz-message">
          <%= t :uploadFoodProfileImg %>
        </div>
      </div>
    </div>
  </div>
  <button type="button" class="btn btn-primary" id="create_fp"><%= t :add %></button>
</div>

js:

var dropzone,
  selectedDpId = '';
$(document).ready(function() {
  Dropzone.options.foodDZ = {
    url: '/' + lang_code + '/admin/food_profiles',
    method: 'POST',
    headers: {
      'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
    },
    paramName: 'picture',
    params: {},
    autoProcessQueue: false,
    addRemoveLinks: true,
    uploadMultiple: false,
    acceptedFiles: ".jpeg,.jpg,.png",
    init: function() {
      dropzone = this;
      this.on("success", function(file) {
        Command: toastr["success"](success)
      })
      this.on("error", function(file) {
        Command: toastr["error"](error)
      })
      this.on("queuecomplete", function(progress) {
        dropzone.removeAllFiles();
      });
    }
  }
});
$(document).on('click', '#create_fp', function() {
  var foodValue = $('#foodLS').val();
  var faMaterialValue = $('#fa_material').val();
  var enMaterialValue = $('#en_material').val();
  if (selectedDpId.toString().length > 0 && foodValue.length > 0 && faMaterialValue.length > 0 && enMaterialValue.length > 0) {
    var obj = {};
    obj.delivery_place_id = selectedDpId;
    obj.food_id = foodValue;
    obj.material_en = faMaterialValue;
    obj.material_fa = enMaterialValue;
    dropzone.options.params.food_profile = obj;
    dropzone.processQueue();
  } else {
    Command: toastr['warning'](complete_form);
  }
})

selectedDpId 和 complete_form 变量在其他地方定义。我在点击事件中使用了 dropzone（不在 params 选项中，也不在 init 中发送事件），因为当 dropzone 启动时，它会将表单属性设为空（它们仅适用于静态数据而不是动态数据），并且当用户使用时我无法更改值填写表格，但以这种方式工作。

我的问题是我想在 food_profile 对象中发送我的表单数据，即使我也可以在 food_profile 对象中发送我的图片，那也很棒！但是当我像上面那样尝试这样做时，在浏览器控制台中我得到 Content-Disposition: form-data; name=food_profile [object Object] 而不是实际数据！我什至尝试将 obj 发送为** JSON.stringify(obj) **它将数据作为字符串发送，并且在后端不接受参数，只接受对象。

提前感谢您的帮助。

Answer 1

由于我找不到解决这个困境的好方法（显然在 params 中将对象作为值发送效果不佳），我决定绕过这个并更改我的后端 api，我只使用 dropzone 上传照片然后我在成功响应中保存图像的ID，当用户完成表单时，我将图片ID连同它一起发送，并且在后端将图片绑定到特定的表单。 希望对遇到此问题的每个人都有用。