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

Question

我的表单包含多种输入类型（file、number、text 等），而一些文件输入有 multipleattribute，而有些则没有。所以问题是如何将所有这些不同的类型附加到 formData() 而无需逐个附加每个输入？实际上，我正在考虑将它与我的所有表单一起使用的功能。

Answer 1

这是一个适用于所有类型输入类型（文件 [单个和多个]、文本、数字等）的解决方案： formData 是包含我们表单数据的对象。例如我稍后填充数据的空对象：

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
}