Javascript FileReader()不能处理Firefox和GiB文件

您可以将数据读取到ArrayBuffer和Blob中(发送到服务器)，并从该数据创建对象URL以在img中使用.它只读取数据一次，但将其用于两件事.(您也可以只使用File两次，但我认为您可能试图避免两次读取数据.也就是说，我不认为两次读取数据会导致显著的延迟，浏览器甚至可能会缓存数据(我不知道是否会).

document.getElementById("error").addEventListener("change", (e) => {
    (async () => {
        try {
            // Read the data so we can send it to the server...
            const data = await e.target.files[0].arrayBuffer();
            const blob = new Blob([data]);
            // Create URL for image
            const url = URL.createObjectURL(blob);
            document.getElementById("error_img").src = url;

            // ...use `data` or `blob` to send to server...
        } catch (error) {
            // ...handle/report error...
        }
    })();
});

或者，如果您愿意:

document.getElementById("error").addEventListener("change", (e) => {
    // Read the data so we can send it to the server...
    e.target.files[0].arrayBuffer()
    .then((data) => {
        const blob = new Blob([data]);
        // Create URL for image
        const url = URL.createObjectURL(blob);
        document.getElementById("error_img").src = url;

        // ...use `data` or `blob` to send to server...
    })
    .catch((error) => {
        // ...handle/report error...
    });
});

window.addEventListener("load", () => {
    document.getElementById("error").addEventListener("change", (e) => {
        (async () => {
            try {
                const data = await e.target.files[0].arrayBuffer();
                // Create URL for image
                const url = URL.createObjectURL(new Blob([data]));
                document.getElementById("error_img").src = url;

                // ...use `data` to send to server...
            } catch (error) {
                // ...handle/report error...
            }
        })();
    });

    document.getElementById("success").addEventListener("change", (e) => {
        document.getElementById("success_img").src = URL.createObjectURL(e.target.files[0]);
    });
});

div {
    display: grid;
    grid-template:
        "a b"
        "c d";
}

img {
    display: block;
    object-fit: contain;
    width: 90%;
    height: 90%;
}

<div>
    <label>
        Error
        <input type="file" id="error">
    </label>

    <label>
        Works
        <input type="file" id="success">
    </label>

    <img src="" alt="" id="error_img">
    <img src="" alt="" id="success_img">
</div>