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

【问题标题】：How to upload a file with scalajs-react and AJAX如何使用 scalajs-react 和 AJAX 上传文件
【发布时间】：2021-06-10 17:32:43
【问题描述】：

我想用 Scalajs-react 和 Ajax 发送一个文件。使用我的form 的onSubmit 方法中的Ajax.send(requestBody: js.Any) 方法，发送部分很容易（我注意用preventDefault 停止事件传播）。要构建请求正文，我使用FormData(event.target)。

def f(e: ReactFormEvent) = {
          Ajax
            .post("http://localhost:9000/rpc/v1/test/update-dataset")
            .setRequestHeader("X-Requested-With", "XMLHttpRequest")
            .send({
              new FormData(
                e.target
                  .asInstanceOf[dom.raw.HTMLFormElement]
              )
            })
            .validateStatusIs(200)(Callback.throwException)
            .asCallback
        }
Form(onSubmit = e => f(e) >> e.preventDefaultCB)(
          FormGroup("groupInput")(
            FormFile(label = "Input")(),
            UncontrolledFormControl(ref = ref, defaultValue = "abc")()
          ),
          Button(`type` = "submit")("Submit")
        )

看起来不错，但由于某种原因，请求正文不包含任何内容（例如：------WebKitFormBoundaryAnYzDUdxWxA8hrJR--），就好像FormData 无法从表单中检索数据一样。这是e.target 的两个孩子的打印输出，我们可以看到两个输入都有一个非空的value：

__reactFiber$ipxb5pt9wbi,[object Object],__reactProps$ipxb5pt9wbi,[object Object],_wrapperState,[object Object],__reactEvents$ipxb5pt9wbi,[object Set],value,C:\fakepath\artifacts.zip,_valueTracker,[object Object]
__reactFiber$ipxb5pt9wbi,[object Object],__reactProps$ipxb5pt9wbi,[object Object],_wrapperState,[object Object],__reactEvents$ipxb5pt9wbi,[object Set],value,abc,_valueTracker,[object Object]

注意：当我手动将append 项发送到FormData 时，请求正文中存在存在。

我做错了什么？

【问题讨论】：

标签： ajax scalajs-react

【解决方案1】：

不知道为什么new FormData(formElement) 不起作用，但手动构建 FormData 是可行的。例如：

send{
  val fd = new FormData()
  val elem = dom.document
                .getElementById("form-inputf")
                .asInstanceOf[HTMLInputElement]
  fd.append("file", elem.files(0))
  fd
}

如果只需要发送一个文件，则根本不需要使用FormData。仅仅依靠 File API 就足够了。例如：

send{
val elem = dom.document
                .getElementById("form-inputf")
                .asInstanceOf[HTMLInputElement]
elem.files(0)
}

【讨论】：