在 Promise 和 Async Await 中使用 FileReader 时遇到问题
我的页面有一个按钮可以上传 csv 并执行 Promise，但是 (1) 我的 async-await 函数在页面加载时立即触发，而不是等到我的 Promise 触发，以及 (2) 当我上传文件时，似乎什么都没有进入我的异步等待和 (3) 当我 console.log 我的解决和拒绝操作时， reader.onload 和 reader.onerror 都在执行！
我已经尝试了所有我能想到的方法并通读了所有相关的帖子。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style> body {font-family: Arial, Helvetica, sans-serif;}</style>
</head>
<input type="file" name="File Upload" id="txtFileUpload" accept=".csv" />
<script>
document.getElementById('txtFileUpload').addEventListener('change', upload, false);
//work through this, then post a question to StackExchange
//https://stackoverflow.com/questions/51026420/filereader-readastext-async-issues
function upload(evt) {
return new Promise(function(resolve, reject) {
file = evt.target.files[0];
reader = new FileReader();
reader.readAsText(file);
reader.onload = function() {
resolve(event)
}; //reader.onload = console.log(event);
reader.onerror = function() {
reject(error)
}; //reader.onerror = console.log(event);
});
}
async function msg(event) {
try {
msg = await upload();
console.log(msg);
} catch (err) {
console.log('loading error occurred');
}
}
msg();
</script>
</body>
</html>
<!--Some data for the .csv file-->
<!--
"film_id","title","description","release_year","rental_rate","length","rating"
"1","ACADEMY DINOSAUR","A Epic Drama of a Feminist And a Mad Scientist who must Battle a Teacher in The Canadian Rockies","2006","0.99","86","PG"
"299","FACTORY DRAGON","A Action-Packed Saga of a Teacher And a Frisbee who must Escape a Lumberjack in The Sahara Desert","2006","0.99","144","PG-13"
"345","GABLES METROPOLIS","A Fateful Display of a Cat And a Pioneer who must Challenge a Pastry Chef in A Baloon Factory","2006","0.99","161","PG"
"391","HALF OUTFIELD","A Epic Epistle of a Database Administrator And a Crocodile who must Face a Madman in A Jet Boat","2006","2.99","146","PG-13"
-->
饮歌长啸3回答
-
守着一只汪
你的问题是你没有把eventanderror作为论点，所以这些将是undefined.所以那个代码：reader.onload = function() { resolve(event)}; reader.onerror = function() { reject(error)};应该：reader.onload = function(event) { resolve(event)}; reader.onerror = function(error) { reject(error)};或者，更简单：reader.onload = resolvereader.onerror = reject -
HUH函数
除了@FZs 指出的之外，我想知道您为什么msg();在脚本末尾调用。如果您希望使用它来获取任何上传的消息，那将无法正常工作。它只是在等待一个从未得到event永远无法解决的值的承诺。另一个小问题是<body>您的<head>部分之后没有开始标签。大多数浏览器可能会让您逃脱惩罚，但无论如何您都应该修复它。 -
慕虎7371278
我只是在这个例子中错误地使用了 Promise。不需要 Promise 或 Async-Await，因为 onload 函数提供了回调功能。只是想向其他初学者指出我的问题从根本上被混淆了，所以这篇文章对任何人都没有帮助。我会删除帖子，但显然这最终会导致无法发布。
随时随地看视频慕课网APP
相关分类
JavaScript