Не удается загрузить файл в React js webapi MVC - PullRequest
Новая
       14

Не удается загрузить файл в React js webapi MVC

0 голосов
/ 17 марта 2020

Я работаю над тем, чтобы загрузить файл в React js Web api C# Mvc. Во время отправки на экран выводилось следующее сообщение об ошибке:

"Uncaught (в обещании) TypeError: Невозможно прочитать свойство 'состояние' из неопределенного"

Контроллер 

 [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>

Ответы [ 2 ]

0 голосов
/ 17 марта 2020

Изменить форму отправить, она работает нормально 

 <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>

и удалить кнопку onclick

0 голосов
/ 17 марта 2020

вам нужно связать вашу асинхронную c функцию Submit (e) с 'this' внутри вашего конструктора компонента. как this.Submit.bind(this)

или вы должны определить его следующим образом 

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