Question

有一个很棒的article解释了如何处理Gatsby Js上托管的netlify项目中的表单提交。但是，这仅与文本值提交有关，表单如何包含一些文件输入？

任何人都可以在这里露面吗？

Answer 1

Netlify在其表单处理程序中支持文件上传，而无需任何特殊配置：https://www.netlify.com/docs/form-handling/#file-uploads

Netlify表单可以接收通过表单提交上传的文件。为此，将带有type="file"的输入添加到任何形式。提交表单后，每个提交文件的链接将包含在表单提交详细信息中。这些可以在Netlify应用程序，电子邮件通知中以及通过我们的API进行查看。

Answer 2

感谢@coreyward的帮助。我在这里发现的问题是如何使用javascript fetch API发布表单数据。因此，这里的解决方案非常简单：

const encode = (data) => {
  const formData = new FormData()
  Object.keys(data)
    .map(key => {
      if (key === 'files') {
        for (const file of data[key]) {
          formData.append(key, file, file.name)
        }
      } else {
        formData.append(key, data[key])
      }
    })
  return formData
}

await window.fetch('/', {
    method: 'POST',
    body: encode({ 'form-name': 'loan', ...this.state, userId: netlifyIdentity.currentUser().id }),
  })

您会注意到，唯一棘手的部分是将official sample article的encode函数从uri encoding重写为form data encoding。

如何在`gatsby js`项目中处理文件上传？

2 个答案: