在 ReactJS 中使用 fetch 上传状态错误

Question

我尝试在 localhost:8080 上使用 ReactJS 中的 fetch 上传 excel 文件，但上传状态为失败。我该如何解决这个问题。

这是我的 App.js

import React, { Component } from "react";
import './App.css';

class App extends Component {
        constructor(props) {
              super(props);
              this.state = {
            file: '', 
            msg: ''
          };
          }

        onFileChange = (event) => {
          this.setState({
            file: event.target.files[0]
          });
        }
        
        uploadFileData = (event) => {
          event.preventDefault();
          this.setState({msg: ''});
      
          let data = new FormData();
          data.append('file', this.state.file);
      
          fetch('http://localhost:8080/upload', {
            method: 'POST',
            body: data
          }).then(response => {
            this.setState({msg: "File successfully uploaded"});
          }).catch(err => {
            this.setState({error: err});
          });
      
        }

  render(){
    return(
      <>
          <div id="container">
              <h1>File Upload Example using React</h1>
              <h3>Upload a File</h3>
              <h4>{this.state.msg}</h4>

              <input onChange={this.onFileChange} 
                      type="file" 
                      accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"/>

              <button disabled={!this.state.file} onClick={this.uploadFileData}>Upload</button>
                </div>
      </>
    );
    }
}
  

export default App;

谁能帮我解决上传文件失败的问题

这是 Github 仓库：https://github.com/BhupathiVenkataSaiCharan/ExcelFileUploadWithFetch

这是托管的 ReactJS 应用程序链接：https://bhupathivenkatasaicharan.github.io/ExcelFileUploadWithFetch/

This is the error I can't solve

Answer 1

你必须设置你的内容类型

headers: {
        'content-type': 'multipart/form-data'
    }