如何使用 Svelte 动态导入 json 数据答案

【问题标题】：How to dynamically import json data using Svelte如何使用 Svelte 动态导入 json 数据
【发布时间】：2022-10-04 16:35:02
【问题描述】：

我以前一直在使用以下代码测试组件

<script>
import x from "/path/to/x.json"
</script>

正如预期的那样，这会将json 文件加载到变量x。

我想做的是在给定 <input> 元素的情况下动态加载本地 json 文件例如

<script>
let files ;
function loadJSONFile(){
  doSomething(files[0].name) ;
}
</script>

<input type="file" bind:files on:change={loadJSONFile}>

其中doSomething() 正在执行与第一个示例中的import 相同的任务。

理想情况下，我可以从任何本地文件夹加载数据，因此bind:files 可能不合适，因为files[0].name 似乎产生的是相对路径，而不是绝对路径。

【问题讨论】：

“本地文件夹”是什么意思？本地应用程序或用户？
本地用户@H.B.

标签： javascript json svelte

【解决方案1】：

要读取用户提供的文件，您可以使用FileReader API。最好的地方就是改变事件。

（如果用户取消对话框，文件将被清除。）

<script>
    let json;
    
    async function onChange(e) {
        const file = e.target.files[0];
        if (file == null) {
            json = null;
            return;
        }
        
        json = await readJsonFile(file);
    }

    async function readJsonFile(file) {
        const reader = new FileReader();
        return new Promise((resolve, reject) => {
            reader.onload = () => {
                resolve(JSON.parse(reader.result));
            };
            reader.onerror = reject;
            reader.readAsText(file);
        });
    }
</script>

<input type=file on:change={onChange} accept=".json"/>
<pre>{JSON.stringify(json, null, '  ')}</pre>

REPL

【讨论】：