Question

我正在尝试使用Fable-Elmish和React Helpers上传文件。但是，当我选择一个文件到可以使用Fetch发送到服务器的东西时，我无法解决如何转换表单事件的问题。这是观点：

R.input [
        ClassName "input-control" 
        Type "file"
        OnChange (fun x -> FileUploaded x.target |> dispatch )
    ] []

我的更新功能的相应部分：

 | FileUploaded file ->
    model, Cmd.ofPromise postCsv file FetchSuccess FetchFailure

用fetch调用api的函数：

let postData input =
    let formData = FormData.Create()
    formData.append("file.csv", input?files)
    let defaultProps =
        [ RequestProperties.Method HttpMethod.POST
        ; RequestProperties.Body (formData |> unbox)]
    promise {
        return! Fable.PowerPack.Fetch.fetch ("/api/data") defaultProps
    }

如何将React.FormEvent转换为获取所需的BodyInit？

Answer 1

您需要创建一个新的FormData对象并将文件追加到它。

df = pd.concat([df.drop('score', 1), pd.DataFrame(df['score'].values.tolist()).add_prefix('score')], axis=1) print (df) key label score0 score1 0 Am2mVTMbhd0y 0 0.999580 0.000420 1 AmG8StB8hM2k 0 0.999712 0.000288 2 Alt137zv2nY6 0 0.884150 0.115850 3 AmGdF7cY4X22 0 0.999947 0.000053

然后将您的调用更改为postRecord以传递formData而不是file。你需要提取来编码它，但你只是传递原始文件数组。

至少这是我对fetch example上传文件的理解。此外，帖子记录看起来不对我，是否只有一个＆＃34;帖子＆＃34;你可以用的方法？ postRecord意味着它期待记录类型。

Answer 2

我认为Fetch.postRecord是您的问题，在it should be Content-Type时将application/json标题设置为multipart/form-data。

你需要使用原始fetch API而不是powerpack wrapper like this。

Answer 3

在测试代码后，检查ev.target?value显示事件只是抓取所选文件的名称。 postRecord似乎用于将json发送到端点。您打算将https://medium.com/ecmastack/uploading-files-with-react-js-and-node-js-e7e6b707f4ef移植到您想要的位置。

Answer 4

事实证明我没有正确使用FileList API。这是post方法的工作解决方案：

let postData input =
let formData = FormData.Create()
formData.append("file.csv", input?files?item(0))
let defaultProps =
    [ RequestProperties.Method HttpMethod.POST
    ;RequestProperties.Headers [unbox EncType "multipart/form-data"]
    ; RequestProperties.Body (formData |> unbox)]
promise {
    return! Fable.PowerPack.Fetch.fetch ("/api/data") defaultProps
}

使用Fable-Elmish将React.FormEvent转换为BodyInit

4 个答案: