在 Elm 中上传文件

Question

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

似乎找不到任何示例。

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

Answer 1

使用像 file-reader 这样的库。

这里有一组比较全面的例子，你可以从this one开始。

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

为此，我写了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 希望它会起作用。

Answer 2

我是 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 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 编码增加了传输的字节数（与 file/blob 相比）。

优势：

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

From the Elm Http docs: "Right now it only supports strings, but we will support blobs and files when we get an API for them in Elm."

Answer 4

官方方法现在是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
    }

在 Elm 中上传文件

File Upload in Elm

elm