Rails 5.1+Vue.js+Dropzone表单提交：JSON POST与强参数问题

看起来你踩了一个常见的坑：直接用JSON.stringify()把数据转成JSON发送给Rails控制器，而Rails默认更适配表单编码的请求格式（尤其是涉及文件上传时，需要用multipart/form-data）。这会导致控制器里的强参数无法正确解析你发送的数据，因为Rails对JSON格式参数的处理逻辑和表单格式略有不同，特别是嵌套参数的情况。

问题根源 #

Dropzone本身在处理文件上传时，默认会使用FormData对象来构建请求（这也是Rails处理文件上传的标准方式）。如果你单独把表单数据序列化成JSON发送，相当于把JSON字符串作为一个参数传递，而不是让Rails直接解析成参数哈希，强参数自然无法正确匹配。

正确的解决方案：把表单数据追加到Dropzone的FormData中 #

你需要在sending事件里，把Vue组件中的表单字段直接追加到Dropzone创建的FormData对象里，而不是用JSON.stringify。这样Rails就能像处理普通表单提交一样解析参数，强参数也能正常工作。

修改你的Vue组件代码如下：

import Vue from 'vue/dist/vue.esm'
import VueResource from 'vue-resource'
import vue2Dropzone from 'vue2-dropzone'

Vue.use(VueResource)

document.addEventListener('DOMContentLoaded', () => {
  new Vue({
    el: '#your-element-id',
    components: {
      vue2Dropzone
    },
    data() {
      return {
        dropzoneOptions: {
          url: '/your-rails-endpoint', // 你的Rails控制器路由
          autoProcessQueue: false, // 如果需要和表单一起提交，先禁用自动上传
          // 其他Dropzone配置...
        },
        formData: {
          title: '',
          description: '',
          // 你的表单字段
        }
      }
    },
    methods: {
      // 绑定Dropzone的sending事件
      onSending(file, xhr, formData) {
        // 遍历表单数据，追加到FormData中
        Object.keys(this.formData).forEach(key => {
          // 如果是嵌套参数，比如post[title]，直接用对应的key
          formData.append(`your_model_name[${key}]`, this.formData[key]);
        });
      },
      // 手动触发上传的方法（比如点击提交按钮时调用）
      submitForm() {
        this.$refs.dropzone.processQueue();
      }
    }
  })
})

对应的Rails控制器强参数配置 #

确保你的控制器里的强参数允许这些字段，比如：

class YourModelsController < ApplicationController
  def create
    @your_model = YourModel.new(your_model_params)
    # 处理保存逻辑...
  end

  private
  def your_model_params
    params.require(:your_model_name).permit(:title, :description, :file) # :file对应Dropzone上传的文件字段
  end
end

额外注意事项 #

• 如果你的表单有嵌套属性（比如关联模型的字段），直接用Rails支持的命名方式，比如post[comments_attributes][0][content]，通过formData.append添加即可。
• 确保Dropzone的autoProcessQueue设置为false，这样你可以在用户点击表单提交按钮时，再手动调用processQueue()来触发上传，确保表单数据和文件一起发送。
• 不需要手动设置请求的Content-Type，Dropzone会自动设置为multipart/form-data，这是Rails处理文件上传的正确格式。

这样修改后，Rails控制器就能正确解析你发送的参数，强参数也能正常过滤和允许字段了。

内容的提问来源于stack exchange，提问作者DaniG2k