文件读取器输出保存到变量

Filereader output saved to variable

本文关键字:变量 保存 输出 读取 文件      更新时间:2023-09-26

我想问你们,如何在JavaScript中保存FileReader的输出到一个变量,或者使函数在FileReader返回输出。

这里也是一段代码:

<input type='file' id='inputFile'>
<button id='btn'>Save</button>
JAVASCRIPT

function imgToBase64(file_input) {
    if (file_input.files && file_input.files[0]) {
        var fileReader = new FileReader();
        fileReader.onload = function (event) {
            result = event.target.result;
            return result // ???
        };
        fileReader.readAsDataURL(file_input.files[0]);
    }
}
parameter = document.getElementById('inputFile');
btn = document.getElementById('btn');
btn.onclick = function() {
  variable = imgToBase64(parameter); //in this variable I would like to store the result from that function
}

我发现FileReader是异步的,我需要一个回调或史密斯,但我不完全明白如何做到这一点。

谢谢

你可以使用AngularJS的$q承诺来获得结果。只要确保在创建imgToBase64函数的地方注入$q即可。

function imgToBase64(file_input) {
    var deferred = $q.defer();
    if (file_input.files && file_input.files[0]) {
        var fileReader = new FileReader();
        fileReader.onload = function (event) {
            result = event.target.result;
            deferred.resolve(result);
        };
        fileReader.readAsDataURL(file_input.files[0]);
    }
    return deferred.promise;
}
parameter = document.getElementById('inputFile');
btn = document.getElementById('btn');
btn.onclick = function() {
    imgToBase64(parameter).then(function (result) {
        variable = result;
    });
}