Javascript FileReader:reader.result明显不为空时为空

我已经试着让我的代码工作好几个小时了，我对此感到非常恼火和厌倦，我想寻求一些帮助

我正在尝试为文件输入类型创建一个简单的API不要开始说我的代码不好，我只是想要一些可以工作的东西，并希望得到您的帮助。多谢各位

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

文件输入-测试 在结果可用之前调用getResult。正如您所说，读取过程是异步的，但是您的代码并没有等待读取完成。您可以在FileInputManager中启动该进程，但在\u文件上\u update会立即调用getResult，它仍然是unknown，因为自从您分配unknown之后，没有为它分配任何内容

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

在结果可用之前调用getResult。正如您所说，读取过程是异步的，但是您的代码并没有等待读取完成。您可以在FileInputManager中启动该进程，但在\u文件上\u update会立即调用getResult，它仍然是unknown，因为自从您分配unknown之后，没有为它分配任何内容

---

您必须等待onload回调，然后才能使用结果。FileInputManager需要提供某种方式连接到它得到的回调，让您提供自己的回调，返回承诺，诸如此类。

因为您正确地声明onLoad是异步的，但在调用新的FileInputManagerfile_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);
}

---

正如您正确地声明onLoad是异步的一样，但是在调用newfileinputmanagerfile_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);
}

---

它说这个.callbackRes不是一个函数。我已经修复了它。在修复了callbackRes之后，TYSMIts对你的权利有效？是的，我所要做的就是将callbackRes从这个.callbackRes改为让callbackRes=>{}我想在这种情况下，你可能不会像这样调用它。onLoad中的callbackRes。不管怎么说，很高兴你明白了它是这样说的。callbackRes不是一个函数。我修复了它之后，TYSMIts对你的权利有效吗？是的，我所要做的就是改变callbackRes，让callbackRes=>{}我想在这种情况下，你可能不会这样调用它。callbackRes在onLoad中。不管怎样，很高兴你找到了答案