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

Posted 2023-02-16

【中文标题】如何将不同类型的表单输入附加到 formData()？

【英文标题】：How to append different types of form inputs to formData()?

【发布时间】：2021-09-28 21:48:37

【问题描述】：

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

【问题讨论】：

Mozilla 文档说你可以将表单传递给FormData 构造函数developer.mozilla.org/en-US/docs/Web/API/FormData/FormData 即new FormData(document.querySelector('#myForm'))，它会解析表单中的所有输入

【参考方案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) => 
   // ...
)

【参考方案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