时间戳

首页 > 解决方案 > 处理来自元素

svelte - 处理来自元素

问题描述

我有以下 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 函数内部不起作用。我也尝试将输入包装在表单元素中，但这不起作用。

标签： sveltesveltekit

解决方案

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

<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} />

推荐阅读