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

Question

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

我应该能够直接在 src 中渲染带有 blob 数据的 img，但我不确定如何让 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 中的所有方法似乎都具有 return 与 src 属性不兼容的类型。有没有实用的方法来转换它？

Answer 1

看起来您目前正在尝试在 view 函数中处理所有这些。按照 Elm 架构的工作方式，您需要集成 view 和 update 函数的行为。您想要的管道是：

显示文件选择对话框（在 view 中，您已经这样做了）
用户选择一个文件（导致 OnDrop 消息）
将文件内容解析成数据URL（调用readAsDataUrl命令）
将解析后的数据URL存储在模型中，可能使用Json.Decode.decodeValue
在您的视图函数中，如果可用，使用解析后的数据 URL 作为 src 的参数。

您的 update 将需要处理初始丢弃 (OnDrop) 和 successful/unsuccessful 内部数据解析这两种情况：

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 作为图像来源传递。

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

Rendering local files in Elm with FileReader

elm