FormData 附加深层嵌套对象答案

【问题标题】：FormData append deep nested objectFormData 附加深层嵌套对象
【发布时间】：2022-08-18 03:46:27
【问题描述】：

是否可以将嵌套对象附加到 FormData？

let formData = new FormData();
let data = {
    title: \'title\',
    text: \'text\',
    preview: {
      p_title:\'p title\', 
      p_text: \'p text\',
      files: [
        {file: File},
        {file: File}
      ]
    }
};

我试过了，但这对我没有帮助：

for ( let dataKey in data ) {
  if (dataKey === \'profile_applicant\') {
    for (let previewKey in data[dataKey]) {
      formData.append(`${previewKey}`, data[dataKey][previewKey]);
    }
  } else {
    formData.append(dataKey, data[dataKey]);
  }
}

服务器控制台 - console.log(req.body)：

名：测试

姓：测试

出生日期：测试

最后一个联系人：测试

文件：[对象对象]，[对象对象]

标签： javascript reactjs multipartform-data

【解决方案1】：

文件是特定的对象，您必须像这样附加它们：

files?.forEach(item => { formData.append('files[]', item.originFileObj) })

您应该在文件对象中找到您的 originFileObj，通常发送所有文件可能会出现问题；在附加键上使用 [] 也很重要，否则如果文件是多个，将无法找到。

【讨论】：

【解决方案2】：

我希望我能提供帮助，我以更简单的方式做到了，我相信它适用于所有假设，请测试。

如果它不适合您的用例，请发表评论，以便我可以编辑我的答案。

完整代码：

const parses = []

const fKey = key => ((function until(value, comp = value) {
    const result = value.replace(/\.([A-z0-9]*)(\.|$)/, '[$1]$2')

    return comp !== result ? until(result, value) : result
})(key))

function populateFormData(values, form = new FormData(), base = '') {
    Object.keys(values).forEach(key => {
        const value = values[key]

        if (typeof value == 'string' ||
            typeof value == 'number' ||
            typeof value == 'boolean') 
        {
            form.append(fKey(`${base}${key}`), value)
            parses.push({
                key: `${fKey(`${base}${key}`)}`,
                value
            })
        } 
        else if (typeof value == 'object') 
        {
            populateFormData(value, form, `${base}${key}.`)
        }
    })
    
    return form;
}

populateFormData({
    title: 'Lucas',
    text: 'Is good :)',
    preview: {
        p_title: 'I am a P title',
        p_text: 'I am a P text',
        test: {
            example: 2,
            my: {
                obj: [
                    'eba',
                    {
                        hyper: 'text'
                    },
                    123
                ],
                yes: true
            }
        }
    }
})

console.log(parses)

【讨论】：