提问人:Joel Bäckström 提问时间:11/11/2023 最后编辑:Joel Bäckström 更新时间:11/11/2023 访问量:23
SvelteKit表单操作,如何附加包含文件的对象列表?
SvelteKit form actions, how to append list of objects containing files?
问:
我想将对象列表发送到我的 sveltekit 服务器。Afaik,表单操作是要走的路。
我有一个看起来像这样的对象列表
export interface ExampleObjectWithFile {
id: string,
file: File, // File type is https://developer.mozilla.org/en-US/docs/Web/API/File
name: string,
}
我无法弄清楚的是您应该如何发送文件作为表单数据的一部分(如果我只发送文件,它就可以工作)我的第一个想法是我需要更改对象的 File 部分的内容类型,但我不知道该怎么做。
因此,我希望能够奏效的是单独上传文件,如下所示:
// Intercept the formAction call to add extra data
async function onSubmit(input) {
input.formData.append('parts', JSON.stringify($parts, skipFileReplacer));
for (let part of $parts) {
input.formData.append('files', part.file);
}
}
当我这样做时,我只是在服务器上得到了一个空对象。
值得一提的是,我正在使用 https://superforms.rocks/ 进行验证。
所以我的问题是:
- 您可以将文件作为 FormData 的一部分发送吗?
- 如何将文件列表发送到服务器并保持与对象的关系?
更新:我发现使用
await event.request.formData()).getAll("file")
在我的服务器上实际上给了我一个文件列表,似乎问题出在解析此文件列表的 sveltekit 超表形式上。
答:
0赞
Joel Bäckström
11/11/2023
#1
Superforms for SvelteKit 尚不支持文件。
请参见:https://superforms.rocks/faq#how-to-handle-file-uploads
解决方案是手动提取formData:
const formData = await request.formData();
const files = formData.getAll("file") as File[];
评论