如何使 .push 在 FileReader.onload() 中工作？

Question

我有以下代码，我尝试使用 FileReader 读取文件并将其内容放入数组中。只有在推送完所有数据后，我才想继续。这是我目前拥有的：

    const confirm = () => {

        var reader = new FileReader();
        let images = [];
        reader.onload = function(e) {
            images.push(e.target.result);
        };
        reader.readAsDataURL(formValues.images[0].file);
        console.log('images base 64');
        console.log(images); // this prints the empty array. 

    };

我只想在使用文件内容更新图像后继续。我该怎么做？

-- 编辑--

我实际上想将多个文件添加到数组中，所以我尝试了以下方法。

    var reader = new FileReader();
        let images = [];
        reader.onload = function(e) {
            images.push(e.target.result);
            console.log('images base 64');
            console.log(images);
        };
        for (let i = 0; i < formValues.images.length; i++) {
            reader.readAsDataURL(formValues.images[i].file);
        }

但这会给出错误“InvalidStateError：对象处于无效状态。”

Answer 1

您正在尝试加载之前的结果。在 onload 函数中移动 console.log(images)。

const confirm = () => {
        var reader = new FileReader();
        let images = [];
        reader.onload = function(e) {
            images.push(e.target.result);
             console.log(images);
        };
        reader.readAsDataURL(formValues.images[0].file);
        console.log('images base 64');          
    };

Answer 2

它对我有用，试试这样，乖乖

this.file64=[];
    reader.onloadend =(e) =>{
                

                  var result = reader.result; 
                      console.log(result)
                      this.file64.push(result)
                };