问题描述
我想用 Scalajs-react 和 Ajax 发送一个文件。使用 Ajax.send(requestBody: js.Any)
的 onSubmit
方法中的 form
方法发送部分很容易(我用 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,_wrapperState,__reactEvents$ipxb5pt9wbi,[object Set],value,C:\fakepath\artifacts.zip,_valueTracker,[object Object]
__reactFiber$ipxb5pt9wbi,abc,[object Object]
注意:当我手动将 append
项添加到 FormData
时,正文请求中存在。
我做错了什么?
解决方法
不确定为什么 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)
}