elm - 使用FileReader在Elm中渲染本地文件

我正在使用simonh1000's file-reader上传图像文件。我希望Elm在拖放时显示文件的内容。

我应该能够直接在img中呈现带有blob数据的src，但是我不确定如何获取FileReader.elm以可接受地输出src值。

[ div [ class "panel" ] <|
    [ p [] [ text "User Avatar" ]
    , div dzClass
        [ label
            [ class "custom-file-upload"]
            [ input
                [ Html.Attributes.type_ "file"
                , FileReader.onFileChange OnDrop
                , multiple False
                ]
                []
            ]
        ]
    , case model.file of
        Just nf ->
            div []
                [ span [] [ text nf.name ]
                , button [ onClick (StartUpload UserAvatar) ] [ text "Upload" ]
                , div [] [ small [] [] ]
                , img [src FileReader.parseSelectedFiles] [] -- This is what I want to do
                ]

        Nothing ->
            text ""

但是，编译器给我这个错误:

The argument to function `src` is causing a mismatch.

488|                                 src FileReader.parseSelectedFiles
                                         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Function `src` is expecting the argument to be:

    String

But it is:

    Json.Decode.Decoder (List NativeFile)

Detected errors in 1 module.

FileReader.elm中的所有方法似乎都具有与src属性不兼容的返回类型。有实际的方法可以转换吗？

最佳答案

看来您目前正在view函数中尝试处理所有这些问题。 Elm体系结构的工作方式，您需要集成view和update函数的行为。您想要的管道是:

显示文件选择对话框(在view中，您已经这样做了)

用户选择一个文件(导致OnDrop消息)

将文件内容解析为数据URL(调用readAsDataUrl命令)

将解析的数据URL存储在模型中，也许可以使用Json.Decode.decodeValue转换为字符串

在您的视图函数中(如果可用)，使用已解析的数据URL作为src的参数。

您的update将需要处理以下两种情况:初始删除(OnDrop)和内部数据的成功/失败解析:

update msg model =
   case msg of
      OnDrop (nf :: _) ->
         model ! [Task.attempt DataURL (FileReader.readAsDataUrl nf.blob)]
      DataURL (Ok dataUrl) ->
         { model | parsedDataUrl = Json.Decode.decodeValue Jason.Decode.string dataUrl |> Result.withDefault "error.png" }
      ...

在您的视图中，传入model.parsedDataUrl作为图像的源。

关于elm - 使用FileReader在Elm中渲染本地文件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48133313/