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

Question

有一个优秀的article解释如何在 netlify 上托管的 Gatsby Js 项目中处理表单提交。然而，这只是关于文本值提交，表单包含一些文件输入怎么样？

任何人都可以在这里阐明一些问题吗？

Answer 1

感谢@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编码到form数据编码。