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

Posted 2023-03-22

【中文标题】在 ReactJS 中使用 fetch 上传状态错误

【英文标题】：Uploaded status error using fetch in ReactJS

【发布时间】：2022-01-13 03:12:15

【问题描述】：

我尝试在 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

【问题讨论】：

localhost:8080/upload这里有api吗？你得到了什么错误？

嘿@Oleg 我已经上传了我的问题图片，请检查

【参考方案1】：

你必须设置你的内容类型

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