Svelte中如何实现指定文件夹内特定扩展名文件的自动检测导入

分两种场景对应不同实现： #

方案1：Vite构建的Svelte/SvelteKit项目（推荐，完全无需手动选择文件） #

这个方案完全满足你固定路径自动导入的需求，利用Vite的import.meta.glob API批量读取固定目录下的所有txt文件，无需用户任何操作。

实现步骤： #

1. 把你要导入的所有.txt文件放在项目固定目录，比如src/assets/target-txt/
2. 替换原有代码如下：

<script>
    // 批量导入目标目录下所有txt文件，{ eager: true } 表示初始化时直接加载所有内容
    const txtModules = import.meta.glob('/src/assets/target-txt/*.txt', { 
        eager: true,
        as: 'raw' 
    })
    // 整理成和你原有逻辑兼容的格式
    let files = Object.entries(txtModules).map(([filePath, text]) => {
        const fileName = filePath.split('/').pop()
        return {
            file: { name: fileName },
            textPromise: Promise.resolve(text)
        }
    })
</script>

{#each files as {file, textPromise} (file.name)}
        <p>The imported file is: {file.name}</p>
        {#await textPromise then text}
        <pre>{text}</pre>
        {:catch}
        <div>error</div>
        {/await}
{/each}

注意：构建时这些txt文件的内容会被直接打包到你的项目代码中，适合txt文件内容固定、不需要运行时动态修改的场景 #

方案2：纯浏览器端静态Svelte应用（无构建工具） #

浏览器出于本地文件安全限制，不允许JS代码不经用户授权直接读取任意本地路径的文件，所以这种场景下只能做到「用户只需要点击一次选择目标文件夹」，后续自动读取文件夹下所有txt，无需逐个选文件。

实现代码： #

<script>
    let files = [];
    
    function contentArray(ev){
            let newlySelected = [...ev.target.files].filter(f => !files.some(ff => ff.file.name === f.name));
            files = [...files, ...newlySelected.map(file => ({file, textPromise: file.text()}))];
    }
</script>

<!-- 加webkitdirectory属性即可支持选择文件夹 -->
<input type='file' multiple webkitdirectory on:change={contentArray} accept=".txt">
{#each files as {file, textPromise} (file.name)}
        <p>The imported file is: {file.name}</p>
        {#await textPromise then text}
        <pre>{text}</pre>
        {:catch}
        <div>error</div>
        {/await}
{/each}

注意：webkitdirectory属性是所有现代浏览器都支持的标准属性，兼容性可以覆盖98%以上的用户设备 #

方案选择建议 #

• 如果你是做内部工具、固定内容的展示类项目，直接选方案1，完全符合你的需求
• 如果你需要用户运行时自己指定本地文件夹，选方案2即可

内容的提问来源于stack exchange，提问作者Dorian