Dropzone无法正确传递对象参数的技术求助

嘿，我来帮你搞定这个Dropzone上传时表单数据和图片封装的问题！你遇到的核心问题是Dropzone处理嵌套对象参数的方式不对，直接传对象会被转成字符串，而JSON.stringify又不适合带文件的multipart请求，咱们换个方式就能解决。

问题根源 #

你现在直接把food_profile设为一个对象，Dropzone会把这个对象转换成字符串[object Object]发送给后端，所以后端收到的是无效数据；而用JSON.stringify的话，整个请求会变成JSON格式，但你同时要上传图片，应该用multipart/form-data格式，后端自然解析不了JSON字符串。

解决方案：用嵌套参数命名格式 #

主流后端框架（比如Rails、Laravel）都支持parent[child]这种命名格式的表单参数，会自动把它们解析成嵌套对象。所以我们不需要传整个对象，而是把每个字段拆成food_profile[字段名]的形式添加到Dropzone的params里。

修正后的代码步骤 #

1. 首先纠正你代码里的一个小错误：你把波斯语和英语的食材描述赋值反了！material_en应该对应enMaterialValue，material_fa对应faMaterialValue，这个得先改过来，不然后端会收到语言颠倒的数据。

2. 修改点击事件里的参数设置部分，替换原来的dropzone.options.params.food_profile = obj：

$(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) {
    // 修正变量赋值错误，设置嵌套格式的参数
    dropzone.options.params = {
      'food_profile[delivery_place_id]': selectedDpId,
      'food_profile[food_id]': foodValue,
      'food_profile[material_fa]': faMaterialValue,
      'food_profile[material_en]': enMaterialValue
    };
    dropzone.processQueue();
  } else {
    Command: toastr['warning'](complete_form);
  }
})

为什么这样有效？ #

当你发送food_profile[delivery_place_id]这类参数时，后端会自动把它们组装成一个food_profile对象，结构就是你想要的：

# 比如Rails后端收到的参数会是这样
params[:food_profile] => {
  delivery_place_id: "xxx",
  food_id: "xxx",
  material_fa: "xxx",
  material_en: "xxx"
}
# 同时params[:picture]就是上传的文件

这样既保留了multipart/form-data格式支持文件上传，又让后端能正确解析出嵌套的food_profile对象。

测试建议 #

你可以在浏览器开发者工具的「网络」标签里查看请求的Form Data部分，确认参数是否正确显示为food_profile[xxx]的形式，以及文件是否也在请求里。

内容的提问来源于stack exchange，提问作者H.Sdq