读取文件为 base 64 以将其存储到状态变量中

Question

我尝试将输入文件的 base64 值存储到状态变量中。但是，问题是获取 base64 是异步的。所以我在 console.logs 中遇到了一些麻烦...这是我的代码：getBase64(file) {        var reader = new FileReader();        reader.readAsDataURL(file);        reader.onload = function () {            arrayStamp.push({photo: reader.result})        };        reader.onerror = function (error) {          console.log('Error: ', error);        };    }handleFiles(event){        for(var x = 0; x < event.target.files.length; x++){            this.getBase64(event.target.files[x])        }        console.log(arrayStamp)        for(var x = 0; x < arrayStamp.slice.length; x++){            console.log(arrayStamp[x])        }    }这给了我：变量 arrayStamp 在类之前声明，如下所示：let arrayStamp = []    class Photos extends Component {        constructor(props){            super(props)            this._child = React.createRef();            this.state = {                modalTitle: '',                alpha3: '',    ...我应该如何浏览数组，它似乎是空的，但我在 console.log 中得到了值....我使用了一些库，如 react-file-reader，但没有人给我获得原始文件 + base64 的可能性。

Answer 1

正如您所说，这是因为readAsDataURL()是异步的，因此您必须等到所有文件都被读取后才能使用您的数组。

const arrayStamp = [];

handleFiles(event) {

    let files = event.target.files,

        i = 0,

        reader = new FileReader();

    reader.onload = (e) => {

        arrayStamp.push({photo: reader.result})

        if (i++ < files.length - 1) {

            // Read the next file.

            reader.readAsDataURL(files[i]);

        } else {

            // All files have been read.

            console.log(arrayStamp);

        }

    };

    reader.readAsDataURL(files[i]);

}

我没有测试过这个，但应该给你这个想法。本质上，您使用一个 fileReader 按顺序加载每个文件并将结果推送到您的数组。

Answer 2

在函数目录中

export function getBase64(img, callback) {

    const reader = new FileReader()

    reader.addEventListener('load', () => callback(reader.result))

    reader.readAsDataURL(img)

}

并使用这个：

import { getBase64 } from 'functionsDirectory'

for (let i = 0; i < files.length; i++) {

  getBase64(

     files[i],

     base64 => { arrayStamp.push({base64, file: files[i]}) }

  )         

}