Question

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

似乎找不到任何例子。

即使使用本机代码，答案也很好。在Data中看到了Elm-Html，但似乎不支持文件和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

使用像file-reader这样的库。

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

但是，有一点需要注意。由于此库使用一些本机代码，因此您无法从官方软件包repo中获取它。所以你必须手动安装它。

为此，我写了this hacky elm-package install replacement。它期望项目根目录中有exact-dependencies.json个文件。您最初可以从构建项目时elm-stuff创建的elm-package目录中获取此文件。然后，您将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"
}

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

{
    "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 4

在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-encoding会增加通过网络传输的字节数（与文件/ blob相比）。

好处：

无需使用包含本机代码的包。

From the Elm Http docs：“现在它只支持字符串，但是当我们在Elm中为它们获取API时，我们将支持blob和文件。”

在Elm中上传文件

4 个答案: