我使用webpack构建了一个浏览器umd库 .
我正在听一个输入文件的onchange事件 . 当有人提交图像/文件时，它会将其转换为base64 . 我试图使这尽可能无缝，所以我使用promises并等待/ async来自https://blog.shovonhasan.com/using-promises-with-filereader/ .
但是，有一个问题 - 当我调用convertToBase64函数时，没有收到任何响应 . 承诺不会返回拒绝或解决 . 没有抛出错误，并且没有命中console.log（data）的行 .
html
<input id="hs-pay" type="file" accept="image/*" capture="camera">
<script type="text/javascript">
let hsp = new HSPay();
</script>
index.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;
filereader.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;
1 回答
According to MDN，
onloadend是FileReader的方法 . 永远不会调用onloadEnd（大写E），因此永远不会调用resolve.