React图片画廊App中Fetch上传图片遇500错误求助

我正在学习React，开发了一个图片画廊App，但向API上传图片时遇到问题。点击“Add”按钮无任何反应，仅在控制台中出现500错误。以下是我包含POST请求的组件代码：

class AddPhoto extends Component { 
  constructor(props) { 
    super(props); 
    this.state = { 
      modal: false, 
      images: [], 
      isLoading: false, 
      error: null, 
    }; 
    this.toggle = this.toggle.bind(this); 
    this.handleClick = this.handleClick.bind(this); 
    this.handleSubmit = this.handleSubmit.bind(this); 
  } 

  toggle() { 
    this.setState({ modal: !this.state.modal }); 
  } 

  handleClick(event) { 
    event.preventDefault(); 
    this.setState({ modal: !this.state.modal }); 
  } 

  handleSubmit(event){ 
    event.preventDefault(); 
    this.setState({ isLoading: true }); 
    let path = this.props.path; 
    fetch(`http://.../gallery/${path}`, { 
      method: 'POST', 
      headers: {'Content-Type':'multipart/form-data'}, 
      body: new FormData(document.getElementById('addPhoto')) 
    }) 
    .then((response) => response.json()) 
    .then((data)=>{ 
      this.setState({images: data.images, isLoading: false}); 
      this.props.updateImages(data.images); 
    }) 
    .catch(error => this.setState({ error, isLoading: false})); 
  } 

  render() { 
    return ( 
      <Card className="add"> 
        <div className="link" onClick={this.toggle}> 
          <CardBody> 
            <CardTitle>Add picture</CardTitle> 
          </CardBody> 
        </div> 
        <Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}> 
          <div className="modal-header"> ... </div> 
          <ModalBody> 
            <form className="addPhotoForm" id="addPhoto" onSubmit={this.handleSubmit}> 
              <input type="file" required /> 
              <Button color="success" type="Submit">Add</Button> 
            </form> 
          </ModalBody> 
        </Modal> 
      </Card> 
    ); 
  } 
}

请问我哪里出错了？为什么无法正常工作，会出现500错误？感谢您的帮助。

你的问题大概率出在**手动设置Content-Type: multipart/form-data**这一步！

当使用FormData作为fetch的请求体时，绝对不要手动设置Content-Type头。浏览器会自动帮你生成正确的Content-Type，其中包含一个关键的boundary参数——这个参数是后端用来分割表单中不同字段的标识。如果手动设置multipart/form-data，浏览器不会自动添加boundary，导致后端无法正确解析你的请求体，最终抛出500服务器错误。

具体修复步骤： #

1. 移除fetch配置中的headers里的Content-Type设置，直接删掉这一行即可：

fetch(`http://.../gallery/${path}`, { 
  method: 'POST', 
  // 删掉这行：headers: {'Content-Type':'multipart/form-data'}, 
  body: new FormData(document.getElementById('addPhoto')) 
})

2. 给文件输入框添加name属性，后端通常需要通过这个name来识别上传的文件字段：

<input type="file" name="uploadedImage" required />

（这里的uploadedImage可以根据后端接收的字段名调整）

额外建议： #

• 可以在fetch的响应处理中先检查请求状态，这样能获取更详细的错误信息，而不是只看到500：

.then((response) => {
  if (!response.ok) {
    throw new Error(`请求失败，状态码：${response.status}`);
  }
  return response.json();
})

• 确认后端的API路径http://.../gallery/${path}是正确的，并且后端已经配置好接收multipart/form-data类型的请求。

试试这些修改，应该就能解决你的上传问题了！

内容的提问来源于stack exchange，提问作者Zoltan Kovacs