无法在 React js webapi MVC 中上传文件答案

【问题标题】：Can not upload file in React js webapi MVC无法在 React js webapi MVC 中上传文件
【发布时间】：2020-03-17 05:26:27
【问题描述】：

我正在努力在 React js Web api C# Mvc 中上传文件。在提交期间，显示以下错误消息的按钮。

"Uncaught (in promise) TypeError: Cannot read property 'state' of undefined"

控制器

 [Route("Api/Authenticate/Uploadfile")]
    [HttpPost]
    public void CreateImage([FromBody] UserPostModel model)
    {
        var file = model.File;
    }

反应组件：

import React, { PropTypes } from 'react';
import axios from 'axios';
class Dashboard extends React.Component {

    constructor(props){
        var files;
        super(props);
        this.state =  {
            selectedFile: null
}
}
fileChangedHandler = event => {
        this.setState({
            selectedFile: event.target.files[0]
          })
          var file = this.refs.file.files[0].name;
          let reader = new FileReader();
        reader.onloadend = () => {
        this.setState({
            imagePreviewUrl: reader.result
        });
        }

         reader.readAsDataURL(event.target.files[0])
    }
async Submit(e){
      e.preventDefault();
      console.log(this.state.selectedFile);
      await this.addImage(this.state.selectedFile);
    };

    addImage = async (image) => {
      await fetch('http://localhost:32188/Api/Authenticate/Uploadfile',
          {
              method: 'POST',
              mode: 'cors',
              headers: {
                  'Accept': 'application/json'
              },
              body: this.state.selectedFile
          }
      )
  }

 render() {

<form >
                                      <input   ref="file"   type="file"   name="user[image]"  onChange={this.fileChangedHandler}    style={{padding: '5px', marginLeft: '31px'}} />



                                      <div className="signin_form_button">
                                            <input type="submit" value="Upload" onClick={this.Submit} className="signin_form_buttonstyle" />
                                        </div>
                                   </form>
}

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

【问题讨论】：

标签： reactjs asp.net-mvc react-native asp.net-web-api2

【解决方案1】：

您需要在组件的构造函数中将 async Submit(e) 函数与 'this' 绑定。像 this.Submit.bind(this)

或者你应该用以下方式定义它

    async Submit=(e)=> {
           //yout code here
        }

【讨论】：

【解决方案2】：

更改表单提交它工作正常

 <form onSubmit={e => this.submit(e)}>
                                  <input   ref="file"   type="file"   name="user[image]"  onChange={this.fileChangedHandler}    style={{padding: '5px', marginLeft: '31px'}} />   
        <div className="signin_form_button">
          <input type="submit" value="Upload"  className="signin_form_buttonstyle" />
        </div>

并在点击时删除按钮

【讨论】：