以 svelte 方式显示文件内容

Question

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

文件text2.txt：

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

测试.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}

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

Answer 1

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

{#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}