如何将不同类型的表单输入附加到formData()

Question

我的表单包含多种输入类型(file、number、text等(，而有些文件输入具有multipleattribute，有些则没有。所以问题是，我如何将所有这些不同的类型附加到formData()，而不需要逐个附加每个输入？实际上，我在想一个函数，把它和我所有的形式一起使用。

Answer 1

这里有一个适用于所有类型的输入类型(文件[single&multiple]、文本、数字等(的解决方案：formData是out对象，它包含我们的表单数据。例如，我的空对象稍后将填充数据：

formData : {
first_name: null,
last_name: null,
image: null,
thumbnails: [],
}

let formData = new FormData()
for(let key in this.formData) {
if(typeof(this.formData[key]) === 'object') {
if(this.formData[key].length) {
for (let subKey in this.formData[key]) {
formData.append(`${key}[]`, this.formData[key][subKey]);
}
} else {
formData.append(key, this.formData[key]);
}
}
else {
formData.append(key, this.formData[key]);
}
}
this.$axios.$post(url, formData, {
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).then((response) => {
// ...
}).catch((error) => {
// ...
})

Answer 2

一个简单的示例

// data: {a:1,b:'2',c:[1,2,'3'],d: {a:1, b:3}, files:[]}
// data will be converted to FormData
const toFormData = data => {
if (data instanceof FormData) return data
const fd = new FormData()
data &&
Object.keys(data).forEach(key => {
const val = data[key]
switch (typeof val) {
case 'string':
val && fd.append(key, val)
break
case 'number':
;(val || val === 0) && fd.append(key, val)
break
case 'boolean':
fd.append(key, val)
break
case 'object':
if (IsArray(val)) {
val.length &&
(typeof val[0] === 'object'
? fd.append(key, JSON.stringify(val))
: fd.append(key, val))
} else if (val instanceof File) {
fd.append(key, val)
} else if (val !== null) {
fd.append(key, JSON.stringify(val))
}
break
}
})
return fd
}