在 svelte 中显示文件内容

Question

我正在使用此代码上传文件。我想显示文件的内容，但我得到的只是[目标文件]，没有别的。有没有办法在 svelte 中显示文件内容？

文件 text2.txt：

1 2 3 4 5 6
7 8 9 10 11 1

Test.svelte：

    <script>
      import { onMount } from "svelte"
      // d3.csv(' http://127.0.0.1:8081/test.csv').then(function(data) {
      //   console.log(data[0])})
    
      let files;
      $: if (files) {
        console.log(files);
        for (const file of files) {
          console.log(`${file.name}: ${file.size} bytes`);
        }
      }
    
    </script>
    
    <p>...from test</p>
    
    <input type='file' bind:files>
    
    {#if files}
        <h2>Selected files:</h2>
        {#each Array.from(files) as file,i}
            <p>{file.name} ({file.size} bytes)</p>
                    <p>e: {file} i: {i}</p>
        {/each}
        <p>files length: {files.length}</p>
    {/if}

要重现此内容，只需将其粘贴到纤细的 REPL 中即可。

Answer 1

上传文件后，您将获得File 类型的对象，这就是您可以执行file.name 和file.size 的原因。要获取此文件的实际内容，您必须打开一个流，然后处理此流。对于简单的文件，您也可以使用.text() 方法，该方法返回一个promise，它可以解析文本内容。这意味着您可以在来自 'svelte' 的 #await 块中使用此承诺

{#each Array.from(files) as file, i}
  <p>{file.name} {file.size} bytes</p>
  {#await file.text() then text}
    <p>e: {text} i: {i}</p>
  {/await}
{/each}