时间戳

首页 > 解决方案 > 如何将不同类型的表单输入附加到 formData()？

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

问题描述

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

标签： javascriptvue.jsvuejs2axios

解决方案

这是一个适用于所有类型输入类型（文件[单个和多个]、文本、数字等）的解决方案： 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) => {
   // ...
})

推荐阅读