在 React 中使用多部分/表单数据时 Rails Controller 中缺少参数

Question

我正在使用 Rails 和 React with Axios 来创建记录。在我的 React 应用程序中，我收集所有数据并将其放入FormData中，如下所示：

const createVtc = () => {
let data = new FormData()
data.append('image', vtcImageToSend)
data.append('name', vtcName)
data.append('description', vtcDescription)
data.append('main_color', vtcColor)
data.append('minimum_age_to_join', vtcMinimumAge)
axios.post(`${ROOT_API}/v1/vtcs/create`, data, {
headers: {
'Authorization': `Bearer ${authToken}`,
'Content-Type': 'multipart/form-data'
}
}).then(res => {
console.log(res.data);
history.push('/dashboard')
}).catch(err => {
console.log(err);
})
};

这包含创建记录所需的所有数据。

这是负责创建它的 Rails 控制器：

def create
vtc = Vtc.new(vtc_params)
# other code is not important
end

这是vtc_params私有功能：

def vtc_params
params.require(:vtc).permit(:id, :name, :description, :minimum_age_to_join, :main_color, :image)
end

非常标准的东西。它一直有效，直到我不得不实现图片上传，这使我切换到FormData上传，从那时起 Rails 抛出此错误：

ActionController::ParameterMissing in V1::VtcsController#create 
param is missing or the value is empty: vtc 

我可以假设问题是什么，但我不知道如何解决。在FormData之前，我曾经像这样发送它：

// other stuff
axios.post(`${ROOT_API}/v1/vtcs/create`, {
"vtc": {
"name": vtcName,
// etc.
}
}, {
headers: {
'Authorization': `Bearer ${authToken}`,
'Content-Type': 'multipart/form-data'
}
})
// other stuff

所有数据都在对象"vtc"，但现在它只是data变量。我尝试添加{"vtc": data}作为 Axios 数据，这并不奇怪地不起作用。

Answer 1

只需使用键vtc将数据变量包装在对象中：

axios.post(`${ROOT_API}/v1/vtcs/create`, {vtc: data}, {
headers: {
'Authorization': `Bearer ${authToken}`,
'Content-Type': 'multipart/form-data'
}