Javascriptpromise不返回异步/等待

Question

我用webpack建立了一个浏览器umd库。

我正在侦听输入文件的onchange事件。当有人提交图像/文件时，它会将其转换为base64。我试图让它尽可能看起来不那么明显，所以我使用了promises和wait/asynchttps://blog.shovonhasan.com/using-promises-with-filereader/.

但是，有一个问题-当我调用convertToBase64函数时，没有收到响应。promise不返回拒绝或决议。没有抛出任何错误，并且该行与控制台连接。未命中日志（数据）。

html

<input id="hs-pay" type="file" accept="image/*" capture="camera">
<script type="text/javascript">
    let hsp = new HSPay();
</script>

指数js

var HSFileReader = require('./helper/fileReader');


class HSPay {

    constructor() {

        this.fileReader = new HSFileReader();

        this.imageInput = document.getElementById('hs-pay');

        if (!this.imageInput) {
            throw "Error(input): hs-pay could not be found:"
        }

        this.imageInput.addEventListener("change", this.uploadImage.bind(this));

    }

    async uploadImage() {

        try {
            let data = await this.fileReader.convertToBase64(this.imageInput.files[0]);
 console.log("data", data);
        } catch (e) {
            console.log(e);
        }

    }
}

module.exports = HSPay;

文件阅读器。js

    class HSFileReader {

        constructor() {
            this.fileReader = new FileReader();
        }

       convertToBase64(file) {

            if (!file) {
                throw "Error(input): file could not be found:"
            }

            return new Promise((resolve, reject) => {
                this.fileReader.readAsDataURL(file);
                this.fileReader.onerror = () => {
                    reject("Problem parsing input file.");
                };

                this.fileReader.onloadEnd = () => {
                    resolve(this.fileReader.result);
                };
            });
        }
    }

module.exports = HSFileReader;

Answer 1

根据MDN，onloadend是FileReader的一种方法onloadEnd（大写E）永远不会被调用，因此，resolve永远不会被调用。