在 svelte 中显示文件内容

Question

我正在使用此代码上传文件。我想显示文件的内容，但我得到的只是 [object file]，没有别的。有没有办法在 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}

要重现这一点，只需将其粘贴到 svelte REPL 中即可。

Answer 1

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

的 #await 块中使用此 promis

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

在 svelte 中显示文件内容

displaying file content in svelte

file

svelte

read-eval-print-loop