Ввод файла в 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

Мне также нужно было сделать это, чтобы получить содержимое файла:

<script>
let data;
let files;
$: {
    if (files && files[0]) {
        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" bind:files />
    <div>
        <textarea id="datafield" rows="10" cols="50">{data}</textarea>
    </div>
</main>

Answer 2

При вводе файла вы хотите связать значение (я), а не событие щелчка.

Примерно так:

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

or bind:value={files}

{files}

Надеюсь, это поможет.