Question

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

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变量在其他地方定义。我在click事件中使用了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，在后端，图片绑定到特定表格。希望它对每个遇到这个问题的人都有用。

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

1 个答案: