FileReader:reader.result 为空，而它显然不是

我一直在尝试让我的代码工作几个小时，我对此感到非常恼火和厌倦，想寻求一些帮助。

我正在尝试为文件输入类型制作一个简单的 API(不要开始说我的代码不好，我只是想要一些有效的东西，并想寻求您的帮助。谢谢。

我知道onload是异步的，我已经尝试了我能想到的所有可能的事情，这让我很恼火。我稍后会回到这里查看是否有人可以提供帮助。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File Input - Testing</title>
<script src="js/app_2.js" defer></script>
</head>
<body>
<input type="file" id="file_input" />
<img id="image_preview" />
</body>
</html>

let file_input;
document.addEventListener("DOMContentLoaded", function() {
file_input = document.querySelector("#file_input");
file_input.addEventListener("change", () => on_file_update());
});
function FileInputManager(files) {
if (!files || typeof files !== "object")
return console.error("FileInputManager: Missing file_input_element.files, please provide it so I can run!");
let reader = new FileReader();
let file = files[0];
let types = file.type.split("/");
let full_type = types[0] === "" ? "empty" : types.join("/");
if (!file)
return console.error("FileInputManager: No file selected, maybe something went wrong?");
// Determine How To Read The File By Testing The Mime-Type
this.determine_read_type = function() {
switch (types[0]) {
case "image":
return reader.readAsDataURL(file);
case "text":
return reader.readAsText(file);
case "application":
return reader.readAsText(file);
default:
console.warn(`FileInputManager: File reading has been aborted, file type [type: ${full_type}] unsupported.`);
break;
}
}
this.determine_read_type();
let result = "unknown";
reader.onload = function() {
result = reader.result;
};
// switch(types[1]) {
//     case "octet-stream":
//         return console.error(`FileInputManager: Unable to run, file type [type: ${full_type}] not allowed.`);

this.getResult = function() {
return result;
}
this.getMimeType = function() {
if (types.length <= 0)
return console.error("FileInputManager: Mime-Type is missing, maybe something went wrong?");
return String(types.join("/"));
}
return;
}
function on_file_update() {
let reader_file = new FileInputManager(file_input.files);
console.log(reader_file.getResult());
if (reader_file.getMimeType().startsWith("image"))
document.querySelector("#image_preview").src = reader_file.getResult();
if (reader_file.getMimeType().startsWith("text"))
console.log(reader_file.getResult());
}

正如您正确声明的那样，onLoad是异步的，但您仍然尝试在以下行中调用new FileInputManager(file_input.files);后立即访问结果

let reader_file = new FileInputManager(file_input.files);
console.log(reader_file.getResult());

相反，您需要从FileInputManager的getResult返回一个承诺并等待它。

function FileInputManager(files) {
let callbackRes = () => {};
const promise = new Promise((res, rej ) => {
this.callbackRes = res;
});
if (!files || typeof files !== "object")
return console.error("FileInputManager: Missing file_input_element.files, please provide it so I can run!");
let reader = new FileReader();
let file = files[0];
let types = file.type.split("/");
let full_type = types[0] === "" ? "empty" : types.join("/");
if (!file)
return console.error("FileInputManager: No file selected, maybe something went wrong?");
// Determine How To Read The File By Testing The Mime-Type
this.determine_read_type = function() {
switch (types[0]) {
case "image":
return reader.readAsDataURL(file);
case "text":
return reader.readAsText(file);
case "application":
return reader.readAsText(file);
default:
console.warn(`FileInputManager: File reading has been aborted, file type [type: ${full_type}] unsupported.`);
break;
}
}
this.determine_read_type();
let result = "unknown";
reader.onload = function() {
callbackRes(reader.result);
};
// switch(types[1]) {
//     case "octet-stream":
//         return console.error(`FileInputManager: Unable to run, file type [type: ${full_type}] not allowed.`);

this.getResult = function() {
return promise;
}
this.getMimeType = function() {
if (types.length <= 0)
return console.error("FileInputManager: Mime-Type is missing, maybe something went wrong?");
return String(types.join("/"));
}
return;
}
async function on_file_update() {
let reader_file = new FileInputManager(file_input.files);
const res = await reader_file.getResult();
console.log(res);
if (reader_file.getMimeType().startsWith("image"))
document.querySelector("#image_preview").src = reader_file.getResult();
if (reader_file.getMimeType().startsWith("text"))
console.log(res);
}

您在结果可用之前调用getResult。正如你所说，读取过程是异步的，但你的代码不会等待读取完成。您在FileInputManager中启动该过程，但随后on_file_update立即调用getResult，这仍然是"unkonwn"，因为自从您分配"unknown"以来，没有任何内容分配给它。

您必须等待该onload回调，然后才能使用结果。FileInputManager需要提供某种方式来挂钩到它得到的回调中——让你提供自己的回调，返回一个承诺，诸如此类。

相关内容

最新更新

热门标签：