`[File]` 被字符串化为 `[object File]`

Question

我正在编写一个文件选择表单，每次选择一个文件时，该文件都会被添加到现有的文件数组中。我的目的是通过表单提交该数组，但提交后，该数组被字符串化。我不知道如何处理，请帮助我。

这是我的代码：

<script lang="ts">
    let selectedFiles: File[] = [];
    function handleSubmit(e: any) {
        errorCode = validate(selectedFiles);
        if (errorCode) {
            console.log(errorCode);
            e.preventDefault();
        }
    }
    function handleFileSelect(e: any) {
        selectedFiles = [...selectedFiles, e.target.files[0]];
    }
    // Create ref to DOM element
    let fileInput: HTMLInputElement;
</script>

<form action="?/submit" method="post" on:submit={handleSubmit}>
    <div>
        <label for="files">Click "+" to add file</label>
        <button on:click={(e) => {e.preventDefault(); fileInput.click();}}>
            <span>+</span>
        </button>
    <input type="file" accept={allowedExtensions} on:change={handleFileSelect} on:invalid={handleInvalid} bind:this={fileInput} hidden/>
        <input type="hidden" name="contest" value={contest.id} />
        <input type="hidden" name="user" value={data.user.id} />
        <input type="hidden" name="files" value={selectedFiles} />
        <p>Selected files: {getFileNames(selectedFiles).join(', ')}</p>
        <br />
        <button type="submit" class="btn btn-primary w-full">Submit</button>
    </div>
</form>

我记录了 request.formData() ，结果如下：

   [Symbol(state)]: [
     {
       name: 'files',
       value: '[object File],[object File],[object File]'
     },
     { name: 'contest', value: '5bvod8teq8kh7yn' },
     { name: 'user', value: 'dvkw0v6uz31zag2' },
     { name: 'score', value: '0' }
   ]

我期望它是这样的：

   [Symbol(state)]: [
     { name: 'files', value: [File] },
     { name: 'files', value: [File] },
     { name: 'files', value: [File] },
     { name: 'contest', value: '5bvod8teq8kh7yn' },
     { name: 'user', value: 'dvkw0v6uz31zag2' },
     { name: 'score', value: '0' }
   ]

Answer 1

如果您创建新的表单数据，您可以将文件添加到其中，但在这种情况下，必须手动/异步发出请求。使用 SvelteKit 时，应使用

enhance

操作，它已经执行此操作并可以在回调中访问表单数据。

<script>
  function onSubmit({ formData }) {
    files.forEach(f => formData.append('files', f));
  }
</script>
<form
    method="POST"
    use:enhance={onSubmit}> ...

还可以在输入上设置文件列表，这也可以完成。

<script>
  let submittedFileInput;

  function onSubmit() {
    const transfer = new DataTransfer();
    files.forEach(f => transfer.items.add(f));
    submittedFileInput.files = transfer.files;
  }
</script>
...
<input bind:this={submittedFileInput} style="display: none"
       name="files" type="file" multiple />

REPL