Блог

недавно я следил за некоторыми сообщениями в stack overflow об импорте некоторых файлов в svelte, и это код:

 <script>

    let files = [];
    
    function contentArray(ev){
        files = [...files, ...ev.target.files.filter(f => !files.includes(f))]
    }
    </script>
    
    
    <input type='file' multiple on:change={contentArray} accept=".txt">
    {#each files as file}
        <p>The imported file is: {file.name}</p>
    {#await file.text() then text}
        <pre>{text}</pre>
    {/await}
    {/each}
 

Моя цель-когда я импортирую файл, если я попытаюсь импортировать его снова, программа просто не покажет его. Я пробовал использовать этот filter метод, но он выдает мне эту ошибку:

 ev.target.files.filter is not a function or its return variable is not iterable
 

Я немного поискал в Интернете, но не могу понять, где я ошибся.
Заранее спасибо.

ev.target.files является не массивом, а FileList (документы списка файлов в MDN) и, как таковой, не имеет filter() метода.

Итак, чтобы использовать filter() , вы должны сначала преобразовать его FileList в массив, который вы можете сделать следующим образом:

 let arrayFileList = [...ev.target.files];

// now you can arrayFileList.filter(...)
 

Кроме того, сравнение File объектов, когда вы это делаете !files.includes(f) , может не дать вам желаемого результата в зависимости от ваших настроек. Таким образом, вы все равно можете получить один и тот же файл несколько раз. Это связано с тем , что при добавлении одного и того же файла несколько раз в ваш <input type="file"> , соответствующие File экземпляры могут быть разными. Поэтому вы, возможно, захотите сравнить на основе имени, как в

 arrayFileList.filter(f => !files.some(ff => ff.name === f.name));