如何用JavaScript从input元素读取.obj文件并获取文本内容？

问题原因 #

1. FileReader是异步操作：readAsText方法不会立即返回文件内容，它异步执行，直接赋值给变量会得到undefined。
2. 复用FileReader实例冲突：循环中使用同一个reader对象，前一次异步读取未完成就被下一次操作覆盖，无法正确获取所有文件内容。

解决方案 #

方法1：为每个文件创建独立的FileReader实例并监听load事件

<input type="file" id="modelImport" name="modelImport" accept=".obj" multiple>

function loadFiles() {
    const fileList = modelImport.files;
    for (let i = 0; i < fileList.length; i++) {
        const reader = new FileReader();
        // 监听读取完成事件
        reader.addEventListener('load', function() {
            // 读取完成后，结果在result属性中
            console.log(`文件${i+1}内容：`, this.result);
            // 此处可处理.obj文件文本内容，比如解析模型数据
        });
        // 开始读取文件
        reader.readAsText(fileList[i]);
    }
}
const modelImport = document.getElementById("modelImport");
modelImport.addEventListener("change", loadFiles);

方法2：使用现代API File.text()（更简洁，推荐）

File.text()是ES2020引入的异步方法，返回Promise，无需手动创建FileReader，代码更简洁：

async function loadFiles() {
    const fileList = modelImport.files;
    for (let i = 0; i < fileList.length; i++) {
        try {
            const text = await fileList[i].text();
            console.log(`文件${i+1}内容：`, text);
            // 处理.obj内容逻辑
        } catch (err) {
            console.error(`读取文件${i+1}失败：`, err);
        }
    }
}
const modelImport = document.getElementById("modelImport");
modelImport.addEventListener("change", loadFiles);

关于是否需要库 #

如果仅需读取文件文本内容，原生API完全足够，无需额外引入库。若后续需要解析.obj模型数据（如提取顶点、面等信息），可考虑引入专门的.obj解析库，简单解析逻辑也可自行实现。

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