SvelteKit表单操作,如何附加包含文件的对象列表?

SvelteKit form actions, how to append list of objects containing files?

提问人:Joel Bäckström 提问时间:11/11/2023 最后编辑:Joel Bäckström 更新时间:11/11/2023 访问量:23

问:

我想将对象列表发送到我的 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/ 进行验证。

所以我的问题是:

  1. 您可以将文件作为 FormData 的一部分发送吗?
  2. 如何将文件列表发送到服务器并保持与对象的关系?

更新:我发现使用

await event.request.formData()).getAll("file")

在我的服务器上实际上给了我一个文件列表,似乎问题出在解析此文件列表的 sveltekit 超表形式上。

表单 文件 sveltekit form-data octet-stream

评论


答:

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[];