读取文件为 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) {&nbsp; &nbsp; let files = event.target.files,&nbsp; &nbsp; &nbsp; &nbsp; i = 0,&nbsp; &nbsp; &nbsp; &nbsp; reader = new FileReader();&nbsp; &nbsp; reader.onload = (e) => {&nbsp; &nbsp; &nbsp; &nbsp; arrayStamp.push({photo: reader.result})&nbsp; &nbsp; &nbsp; &nbsp; if (i++ < files.length - 1) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Read the next file.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; reader.readAsDataURL(files[i]);&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // All files have been read.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(arrayStamp);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; };&nbsp; &nbsp; reader.readAsDataURL(files[i]);}我没有测试过这个，但应该给你这个想法。本质上，您使用一个 fileReader 按顺序加载每个文件并将结果推送到您的数组。

Answer 2

在函数目录中export function getBase64(img, callback) {&nbsp; &nbsp; const reader = new FileReader()&nbsp; &nbsp; reader.addEventListener('load', () => callback(reader.result))&nbsp; &nbsp; reader.readAsDataURL(img)}并使用这个：import { getBase64 } from 'functionsDirectory'for (let i = 0; i < files.length; i++) {&nbsp; getBase64(&nbsp; &nbsp; &nbsp;files[i],&nbsp; &nbsp; &nbsp;base64 => { arrayStamp.push({base64, file: files[i]}) }&nbsp; )&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}