Javascript 使用axios配置事件设置状态

如何将Axios事件结果添加到状态

使用axios post方法上载文件

将状态设置为axios post metod的配置

onUploadProgress

事件

接收以下错误

这是我的代码：

export default class StudioAlbumUpload extends Component{

    constructor(props){
        super(props);

        this.state = { prog: 0 };
    }

    onDrop(acceptedFiles, rejectedFiles){
        var files = acceptedFiles;
        var data = new FormData();
        data.append('file', files[0]);

        var config = {
            onUploadProgress: function(progressEvent) {
                var percentCompleted = Math.round( (progressEvent.loaded * 100) / progressEvent.total );
                //How set state with percentCompleted?
                this.setState({prog: percentCompleted}); 
            }
        };

        axios.post(`${ROOT_URL}/api/studio/album/upload`, data, config)
            .then((response) => console.log('hello'))
            .catch(error => console.log(error));
    }

    render() {
        return (
            <div>
                {this.state.prog}
                <Dropzone onDrop={this.onDrop} maxSize={5120} accept={'image/*'}>
                    <div>Try dropping some files here, or click to select files to upload.</div>
                </Dropzone>
            </div>
        );
    }
}

导出默认类StudioAlbumUpload扩展组件{
建造师（道具）{
超级（道具）；
this.state={prog:0}；
}
onDrop（接受文件、拒绝文件）{
var files=acceptedFiles；
var data=new FormData（）；
data.append（'file'，files[0]）；
变量配置={
onUploadProgress:函数（progressEvent）{
var percentCompleted=数学轮（（progressEvent.loaded*100）/progressEvent.total）；
//如何设置完成百分比的状态？
this.setState（{prog:percentCompleted}）；
}
};
post（`${ROOT\u URL}/api/studio/album/upload`，数据，配置）
.然后（（响应）=>console.log（'hello'））
.catch（错误=>console.log（错误））；
}
render（）{
返回(
{this.state.prog}
尝试在此处删除一些文件，或单击以选择要上载的文件。
);
}
}

箭头功能

您的

onUploadProgress

函数有自己的

此
上下文。但是您需要使用components
this.setState
方法。因此，您最好使用
=>
箭头函数，该函数没有上下文绑定，并使用前面的
此
上下文

var config = {
    onUploadProgress:(progressEvent) => {
        var percentCompleted = Math.round( (progressEvent.loaded * 100) / progressEvent.total );
        this.setState({prog: percentCompleted}); //How set state with percentCompleted?
    }
};

在此了解有关箭头函数的更多信息

更改功能上下文

在此了解有关绑定的更多信息

您可能需要将“this”的上下文绑定到函数，以便能够使用setState。您看到的实际错误是什么？有控制台错误吗？@ahmet您得到的错误是什么？修复代码格式并使之有意义
var config = {
    onUploadProgress: function(progressEvent) {
        var percentCompleted = Math.round( (progressEvent.loaded * 100) / progressEvent.total );
        this.setState({prog: percentCompleted}); //How set state with percentCompleted?
    }.bind(this)
};