svelte - svelte 中的文件输入不更新数据

Question

我正在尝试创建一个带有客户端文件输入的网站，其中一些数据完全在客户端上处理，并且不会发送到服务器。

我有以下 Svelte 组件 (App.svelte):

<script>
let data;
function handleFileSelect(evt) {
    var files = evt.target.files;
    if (! (files && files[0])) {
        return;
    }
    let binfile = files[0];
    let reader = new FileReader();
    reader.onload = function(evt) {
        data = new Uint8Array(evt.target.result);
    }
    reader.readAsArrayBuffer(binfile);
}
</script>

<main>
    <label for="fileinput">Your data</label>
    <input type="file" id="fileinput" on:click={handleFileSelect}/>
    <div>
        <textarea id="datafield" rows="10" cols="50">{data}</textarea>
    </div>
</main>

当我单击该按钮时，文本区域中的数据不会更新，但是当我第二次单击该按钮时，数据会在单击后立即加载到文本区域中。我在 svelte 中加载文件的方向正确吗？我缺少什么？谢谢!

Answer 1

在文件输入上，您想要绑定(bind)值而不是单击事件。

像这样:

<script>
let files = [];
<input 
   bind:files
   type="file"
   accept="image/*">

or bind:value={files}

{files}

编辑:回答chovy的问题

let template = null;
let files = null;

$: if (files) {
   const fileText = files[0].text();
   fileText.then((text) => {
       template = text;
   });
   files = null;
}

请注意，我只想使用代码中的第一个文件，如果您使用多文件上传，则必须从文件调用中删除 [0]，迭代数组并写入就像处理任何其他数组数据一样，将每个单独的文件放入指定的变量中。在上述情况下，模板将包含文本形式的实际文件数据。

希望这有帮助。