Как сохранить значение в глобальной переменной из функции onChange?

Question

Мне нужно получить доступ к возвращенному значению из функции onChange, но он ничего не читает, потому что он явно не хранится должным образом. Вот мой код:

HTML:

<input type="file" accept="image/*" name="UploadBox" className="custom-file-input" id="UploadBox" onChange={this.onChange} />

JS:

onChange = (e) => {
        this.setState({
            selectedImage: e.target.files[0]
        })

        let files = e.target.files;
        let file = e.target.files[0];

        if (files.length > 0 && file) {
            this.getBase64(files[0]);
        }
    }

    getBase64(file) {
        let reader = new FileReader();

        console.log(file);

        reader.onload = function () {
            console.log(reader.result);
            let binaryString = reader.result;
            let btoaString = btoa(binaryString);
            //console.log(btoaString);
            return binaryString;
        }

        reader.readAsDataURL(file);

        reader.onerror = function (error) {
            console.log('Error: ', error);
        }
    }

Далее Вниз Здесь я должен сохранить возвращаемое значение в переменной imageBase64Function:

let imageBase64Function = this.getBase64();

Когда я делаю console.log файла reader.result, я получаю правильную информацию base64. Но мне нужно хранить его в переменной imageBase64. Я пытался исследовать глобальные переменные и назначения, но я знаю, что делаю что-то не так. Спасибо за любую помощь, спасибо!

Редактировать: Решено после попытки setState и использования строки base64 путем удаления метаданных в начале

constructor (props) {
        super(props);
        this.state = {
            selectedImage: null,
            errors: {}
        }
        this.onChange = this.onChange.bind(this);
        this.getBase64 = this.getBase64.bind(this);
    }

onChange = (e) => {
        this.setState({
            selectedImage: e.target.files[0]
        })

        let files = e.target.files;
        let file = e.target.files[0];

        if (files.length > 0 && file) {
            this.getBase64(files[0]);
        }
    }

    getBase64(file) {
        let reader = new FileReader();

        console.log(file);

        reader.onload = function () {
            console.log(reader.result);
            let binaryString = reader.result;
            let base64OrigString = binaryString.split('base64,');
            let base64Split = base64OrigString[1];
            //return binaryString;
            this.setState({selectedImage: base64Split})
        }.bind(this)

        reader.readAsDataURL(file);

        reader.onerror = function (error) {
            console.log('Error: ', error);
        }
    }

Answer 1

Вместо возврата binaryString вы можете позвонить this.setState({ selectedImage: binaryString }). Как вы обнаружили в своем тестировании, вам нужно было отключить bind(this), чтобы this.setState мог вызываться из вашей вложенной функции. Другое возможное решение - оставить привязку как есть, но изменить способ вызова анонимной функции reader.onload. Это сохранит снаружи this и позволит вам получить доступ к this.state изнутри блока.

reader.onload = () => { … }