Javascript 如何使用vanilla js从输入元素读取csv文件？

我一直在尝试读取用户用html表单提供的csv文件，然后处理数据。我想用Fetch来解决这个问题。它在读取服务器上的文件时非常有效

const response = await fetch('../csv/datafile.csv');
const data = await response.text();

当我想让用户选择本地文件时，问题就开始了

<input type="file" name="input_file" id="input_file" accept=".csv">

当然，它不工作，因为它使用正确的文件名，但认为它在服务器上。我尝试了很多其他的方法，但是遇到了伪路径、对象元素、CORS和其他问题

我还试图解决FileReader的问题，获得了数据，但遇到了无承诺的异步问题，无法等待数据将其放入变量外部

---

最好的方法是什么？有没有可能在不将文件上传到服务器的情况下解决vanilla js的问题？我认为这应该是非常容易的，即使是像我这样的初学者，但我浪费了太多的时间，想请你帮忙。也许我还有别的地方做错了。谢谢您的帮助。

以下是您的做法，改编自

const formFile=document.querySelector（'input_file'）；
formFile.addEventListener（'change'，getData，false）；
函数getData（）{
如果（！window.File | | |！window.FileReader | |！window.FileList | |！window.Blob）{
console.log（'此浏览器不完全支持文件API'）；
返回；
}
如果（！formFile.files）{
log（“此浏览器似乎不支持文件输入的`files`属性。”）；
}如果（！formFile.files[0]）{
log（“未选择任何文件”）；
}否则{
让file=formFile.files[0]；
设fr=newfilereader（）；
fr.onload=接收到的文本；
fr.readAsText（文件）；
函数receivedText（）{
控制台日志（fr.result）；
//在这里做额外的处理
}
}
}

---

我的回答有帮助吗？谢谢@Nisala。我希望它可以通过Fetch实现，但是这个文件阅读器也工作得很好。

const formFile = document.querySelector('#input_file');
formFile.addEventListener('change', getData, false);

async function getData() {
    const response = await fetch('formFile.files[0].name');
    const data = await response.text();
}