没问题，我来帮你调整代码实现文件上传功能。你的现有代码没有获取到要上传的文件，也没有正确构造文件上传的请求体，这是核心问题。以下是具体的修改步骤和完整代码：

关键修改点说明 #

• 获取文件对象：给文件输入框添加React Ref，方便可靠地获取用户选中的文件
• 使用FormData构造请求体：这是浏览器处理文件上传的标准方式，能自动处理文件的二进制数据和请求头
• 调整Fetch请求配置：设置请求方法为POST，将FormData作为请求体，不要手动设置Content-Type（浏览器会自动添加正确的multipart/form-data头和边界信息）
• 优化表单提交逻辑：改用表单的onSubmit事件而非按钮的onClick，更符合表单的原生行为规范

修改后的完整代码 #

class FileUploadComponent extends React.Component {
  constructor(props) {
    super(props);
    // 创建Ref用于获取文件输入框
    this.fileInputRef = React.createRef();
    // 绑定事件处理函数的this指向
    this.handleFileSubmit = this.handleFileSubmit.bind(this);
  }

  componentDidMount() {
    // 把getScene()移到这里，避免render时重复执行
    getScene();
  }

  handleFileSubmit(e) {
    e.preventDefault();
    
    // 获取用户选中的文件
    const fileInput = this.fileInputRef.current;
    const file = fileInput.files[0];
    
    // 如果没有选择文件，给出提示
    if (!file) {
      alert('请先选择要上传的文件');
      return;
    }
    
    // 构造FormData，把文件添加进去
    const formData = new FormData();
    formData.append('uploaded_file', file);
    
    // 发送上传请求
    fetch(apiAddress, {
      method: 'POST',
      body: formData
    })
    .then((res) => {
      // 先检查响应是否成功
      if (!res.ok) {
        throw new Error(`HTTP error! status: ${res.status}`);
      }
      return res.json();
    })
    .then((res) => {
      this.props.onFileChange(JSON.stringify(res));
    })
    .catch((err) => {
      console.error('文件上传失败:', err);
      // 这里可以添加前端错误提示逻辑，比如展示错误信息给用户
    });
  }

  render(){
    return (
      <form onSubmit={this.handleFileSubmit}>
        <input type='file' name='uploaded_file' ref={this.fileInputRef} />
        <button type='submit'>Upload</button>
      </form>
    )
  }
}

额外注意事项 #

• 如果你的组件是函数组件（而非类组件），可以使用useRef Hook来替代React.createRef()
• 确保后端API端点支持multipart/form-data类型的请求，并且能正确解析uploaded_file字段的文件
• 我把getScene()移到了componentDidMount里，因为render方法会在组件更新时多次执行，避免不必要的重复调用

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