如何使用scalajs-react和AJAX上传文件

import japgolly.scalajs.react._
import japgolly.scalajs.react.vdom.prefix_<^._

object FileUploadComponent {
  // 定义组件的Props类型
  case class Props(onFileUpload: String => Callback)

  // 创建组件
  val component = ReactComponentB[Props]("FileUploadComponent")
    .render_P { props =>
      <.div(
        <.input.fileUpload(
          ^.onChange ==> { e: ReactEventI =>
            val file = e.target.files(0)
            props.onFileUpload(file.name).runNow()
          }
        )
      )
    }
    .build
}

import japgolly.scalajs.react._
import japgolly.scalajs.react.vdom.prefix_<^._

object ParentComponent {
  // 处理文件上传的函数
  def handleFileUpload(fileName: String): Callback = {
    // 在这里执行文件上传的逻辑
    Callback.empty
  }

  // 创建父组件
  val component = ReactComponentB[Unit]("ParentComponent")
    .render(_ =>
      <.div(
        // 使用FileUploadComponent并传递handleFileUpload函数
        FileUploadComponent.component(FileUploadComponent.Props(handleFileUpload))
      )
    )
    .build
}

import org.scalajs.dom.ext.Ajax
import scala.concurrent.ExecutionContext.Implicits.global

def handleFileUpload(fileName: String): Callback = {
  // 构建FormData对象
  val formData = new FormData()
  formData.append("file", fileName)

  // 发送文件到服务器
  Ajax.post("/upload", formData).map { xhr =>
    // 处理上传成功的逻辑
  }

  Callback.empty
}