时间戳

首页 > 解决方案 > 如何通过 onChange 函数将值存储在全局变量中？

javascript - 如何通过 onChange 函数将值存储在全局变量中？

问题描述

我需要从 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);
        }
    }

进一步 On Down 这里是我需要在 imageBase64Function 变量中存储返回值的地方：

let imageBase64Function = this.getBase64();

当我执行 reader.result 的 console.log 时，我得到了正确的 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);
        }
    }

标签： javascriptreactjsbase64

解决方案

binaryString您可以调用，而不是返回this.setState({ selectedImage: binaryString })。正如您在测试中发现的那样，您需要 unbind(this)以便this.setState可以从嵌套函数中调用它。另一种可能的解决方案是保持绑定不变，但更改调用匿名reader.onload函数的方式。这将保留外部this并允许您this.state从块内访问。

reader.onload = () => { … }

推荐阅读