我正在学习 svelte 并且正在做一些实验，但我不知道如何做到这一点：当我导入一个文件并显示它时，我将它保存在一个<pre>标签中，但是，如果我想稍后更新另一个文件，显然，它会覆盖所有内容。有代码：
<script>
let files;
</script>
<input type='file' multiple bind:files accept=".txt">
{#if files}
<h2>Files selected: </h2>
{#each Array.from(files) as file}
<p>The imported file is: {file.name}</p>
{#await file.text() then text}
<pre>{text}</pre>
{/await}
{/each}
{/if}
这是示例文件：文件 1
我是一个示例文件！
文件 2
我是另一个示例文件！
文件3：
我是在之后进口的
所以我一起导入 File1 和 File2，但是如果我在它们之后导入 File3，它会给我这个：
And i was imported afer
如何将最新的文件添加到其他文件？提前致谢。
有两种方法可以解决这个问题：
1) 不使用绑定
第一种方法是bind:files在用户添加文件时停止使用并自行管理文件数组。
<script>
let files = [];
function handleChange(ev) {
files = [...ev.target.files, ...files]
}
</script>
<input type='file' multiple on:change={handleChange} accept=".txt">
<!-- markup goes here -->
{#each files as file}
...
{/each}
2) 使用绑定和第二个数组
使用此方法，您仍然可以使用bind:files语法，但实际上并没有使用files变量，而是将该数组的内容复制到第二个数组中，然后使用：
<script>
let files = []
let _files = []
$: _files = [...files, ..._files]
</script>
<!-- markup goes here, but use _files instead -->
{#each _files as file}
...
{/each}
作为奖励，这两种情况都不再需要Array.from，因为传播语法做到了！但是，现在您将不得不在 if 中检查数组的长度，因为 now files（或_files）始终存在。
但是，您可能有兴趣知道您可以执行以下操作：
{#each array as item}
something with item
{:else}
array is empty
{/each}
所以你不再需要#if了。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句