有一个很棒的article解释了如何处理Gatsby Js
上托管的netlify
项目中的表单提交。但是,这仅与文本值提交有关,表单如何包含一些文件输入?
任何人都可以在这里露面吗?
答案 0 :(得分:1)
Netlify在其表单处理程序中支持文件上传,而无需任何特殊配置:https://www.netlify.com/docs/form-handling/#file-uploads
Netlify表单可以接收通过表单提交上传的文件。为此,将带有
type="file"
的输入添加到任何形式。提交表单后,每个提交文件的链接将包含在表单提交详细信息中。这些可以在Netlify应用程序,电子邮件通知中以及通过我们的API进行查看。
答案 1 :(得分: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 encoding
重写为form data encoding
。