在 Elm 中上传文件

Question

如何在 Elm 中上传文件（图像或 excel）？

似乎找不到任何示例。

即使使用本机代码，答案也很好。在Elm-Html 中看到Data，但似乎不支持文件和blob。有什么办法解决这个问题？

Answer 1

我是 MisterMetaphor 引用的库的作者。不过，它比他解释的更容易使用。看看我在示例中是如何设置 elm-package.json 的：https://github.com/simonh1000/file-reader/blob/master/example/elm-package.json - 只需添加 "native-modules": true,。

我写了一个blog 来支持 0.18 代码的发布，并展示如何上传到例如S3 可以在 Elm 中完成。

Answer 2

官方方法现在是https://package.elm-lang.org/packages/elm/file/latest/

这是 Elm 0.19 中的新增功能。

现在官方的Http包也支持了。这是来自https://package.elm-lang.org/packages/elm/http/latest/Http#request的示例

import File
import Http

type Msg = Uploaded (Result Http.Error ())

upload : File.File -> Cmd Msg
upload file =
  Http.request
    { method = "PUT"
    , headers = []
    , url = "https://example.com/publish"
    , body = Http.fileBody file
    , expect = Http.expectWhatever Uploaded
    , timeout = Nothing
    , tracker = Nothing
    }

Answer 3

在 Elm 中处理文件上传的另一个选项是

• 通过一个端口从 FileReader 获取一个 base64 编码的值到您的 Elm 应用程序中。
• 然后，将该 base64 编码值发送到您的服务器（例如，在 JSON 正文中）。

可以在这里找到教程https://www.paramander.com/blog/using-ports-to-deal-with-files-in-elm-0-17（它说它适用于 Elm 0.17，但它在 Elm 0.18 中保持不变）。

这种方法的缺点是

• 您的服务器需要对其接收的文件进行 base64 解码，这会稍微增加服务器负载，并且
• base64 编码会增加通过线路传输的字节数（与文件/blob 相比）。

好处：

• 无需使用带有本机代码的包。

From the Elm Http docs: "目前它只支持字符串，但是当我们在 Elm 中获得用于 blob 和文件的 API 时，我们将支持它们。"

Answer 4

使用像file-reader 这样的库。

有一组相当全面的例子，你可以从this one开始。

不过，有一个警告。由于该库使用了一些本机代码，因此您无法从官方包 repo 中获取它。所以你将不得不求助于手动安装它。

为此，我写了this hacky elm-package install replacement。它需要在项目的根目录中有一个exact-dependencies.json 文件。您最初可以从elm-package 在构建项目时创建的elm-stuff 目录中获取此文件。然后将file-reader 包的引用添加到exact-dependencies.json 文件中，如下所示：

{
    "evancz/elm-effects": "2.0.1",
    "evancz/virtual-dom": "2.1.0",
    "evancz/elm-http": "3.0.0",
    "evancz/start-app": "2.0.2",
    "evancz/elm-html": "4.0.2",
    "elm-lang/core": "3.0.0",
    "simonh1000/file-reader": "1.0.0"
}

您还需要在您的elm-package.json 文件中添加对file-reader 的引用：

{
    "version": "1.0.0",
    "summary": "helpful summary of your project, less than 80 characters",
    "repository": "https://github.com/user/project.git",
    "license": "BSD3",
    "source-directories": [
        "."
    ],
    "exposed-modules": [],
    "dependencies": {
        "elm-lang/core": "3.0.0 <= v < 4.0.0",
        "evancz/elm-effects": "2.0.1 <= v < 3.0.0",
        "evancz/elm-html": "4.0.2 <= v < 5.0.0",
        "evancz/elm-http": "3.0.0 <= v < 4.0.0",
        "evancz/start-app": "2.0.2 <= v < 3.0.0",
        "simonh1000/file-reader": "1.0.0 <= v < 2.0.0",
    },
    "elm-version": "0.16.0 <= v < 0.17.0"
}

在此之后，您运行 the elm-package install replacement 并希望它会起作用。