处理来自 <input> 元素的文件答案

【问题标题】：Processing files from an <input> element处理来自 <input> 元素的文件
【发布时间】：2021-11-10 23:36:23
【问题描述】：

我有以下 Svelte 脚本来上传文件

<script lang="typescript">
    let files = [];
    export let multiple = true;
    function handleChange(e) {
        files = Array.from(e.target.files);
        // process the contents of each file
    }
</script>


Upload a csv of the measurements:

<input type="file" {multiple} onChange={handleChange} />

<div>
    {#each files as f}
        {f.name}, {f.size}, {f.type},
    {/each}
</div>

我想访问每个文件的内容并通过将它们路由到端点来处理它们。我应该在对端点的 fetch post 请求函数的主体中引用哪些数据？

只是在做

fetch("endpoint", {method: "POST", body: JSON.stringify(files)})

里面的handleChange函数不起作用。我也尝试将输入包装在表单元素中，但这不起作用。

【问题讨论】：

如果你在handleChange() 中登录files - 你会得到什么？（+ 我认为倍数不应该用花括号..？）
+ 是 on:change= 而不是 onChange
读取 .csv 文件 Papa Parse 可能会有帮助
@Corrl 我已将 onChange 更改为 on:change 和日志文件，但是没有记录任何内容。
这很奇怪，看看this REPL它在哪里工作（你不必将FileList转换为数组，你可以用for-of-loop迭代它）

标签： svelte sveltekit

【解决方案1】：

我在 Svelte 中使用 papa.parse 函数解决了这个问题：

<script lang="typescript">
    import papa from 'papaparse';

    function handleChange(event) {
        let files = event.target.files;
        for (let f of files) {
            papa.parse(f, {
                header: true,
                complete: function (results) {
                    console.log(results);
                }
            });
        }
    }
</script>



Upload a csv of the measurements:

<input type="file" on:change={handleChange} />

【讨论】：