使用 Fable-Elmish 上传文件

Question

我想上传一个文件到我的精灵寓言，结束，然后我可以将它发送到服务器进行处理。但是，我找不到任何文档/示例来说明这一点。这是我的更新函数：

let update msg model : Model * Cmd<Msg> =
    match msg with
    | QueryResults ->
        {model with results = None}, Cmd.ofPromise getData "" FetchSuccess FetchFailure
    | FetchSuccess data -> 
        { model with results = Some data }, []
    | FetchFailure ex ->
        Browser.console.log (unbox ex.Message)
        Browser.console.log "exception occured" |> ignore
        model, []
    | FileUploaded ->
        Browser.console.log "file selected!" |> ignore
        model, []

这是包含文件上传的视图函数的一部分：

R.input [
        Type "file"
        OnChange (fun x -> FileUploaded |> ignore)
    ] []

据我所知，这应该会触发更新并向控制台打印 "file uploaded!"，但什么也没有发生。

如果有人能在这里指出正确的方向，那就太好了。

Answer 1

您正在将 FileUploaded 消息传递给 ignore，这正如它的名字所说：忽略它的参数，什么也不做。所以该消息实际上不会去任何地方。

对于 Fable-Elmish，您的视图函数接受一个名为 dispatch 的参数，该函数将接收一条消息并将其放入消息队列（这样 update 将收到稍后消息）。查看 the TodoMVC sample，尤其是 onEnter 和 viewModel 函数，了解详细信息。

基本上，您的 OnChange (fun x -> FileUploaded |> ignore) 行应该是 OnChange (fun x -> FileUploaded |> dispatch)。

使用 Fable-Elmish 上传文件

File Upload using Fable-Elmish

f#

elm

fable-f#