代码之家 › 专栏 › 技术社区 › Jeff Tian

如何处理“gatsby js”项目中的文件上载?

netlify gatsby

0

Jeff Tian · 技术社区 · 8 年前

有一个优秀的 article 解释如何在 Gatsby Js 项目托管于 netlify . 然而,它只是关于文本值的提交,那么表单包含一些文件输入呢?

这里有人能发光吗?

2 回复 | 直到 8 年前

1

coreyward 8 年前

NetLify支持在表单处理程序中上载文件,无需任何特殊配置: https://www.netlify.com/docs/form-handling/#file-uploads

NetLify表单可以接收通过表单提交上载的文件。为此,添加一个输入 type="file" 任何形式。提交表单时,每个上载文件的链接将包含在表单提交详细信息中。这些可以在NetLify应用程序、电子邮件通知和我们的API中查看。

2

1

Jeff Tian 8 年前

谢谢@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 }),
  })

你可以注意到唯一棘手的部分是重写 encode 功能 official sample article 从 uri encoding 到 form data encoding .