Elm中的文件上传

Question

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

似乎找不到任何示例。

即使使用本地代码，答案也可以。在Elm-Html中看到了Data，但似乎不支持文件和Blob。有什么解决方法？

- ritcoder

Answer 1

我是MisterMetaphor所提及的库的作者，然而使用该库比他所解释的更容易。看一下我在示例中如何设置elm-package.json文件：https://github.com/simonh1000/file-reader/blob/master/example/elm-package.json - 只需添加"native-modules": true,即可。

我撰写了一篇博客文章以支持发布0.18版本的代码并展示如何在Elm中进行S3上传等操作。

- Simon H

---

设置native-modules为true，包含elm-mimetype包，并将文件读取器的src文件夹添加到源目录中，以便开始工作。之后，一切都很顺利。 - ritcoder

无法，因为所有的本地 /内核代码现在都被禁止了。 - Simon H

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
    }

- Marcelo Lazaroni

Answer 3

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

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

可以在此处找到教程：https://www.paramander.com/blog/using-ports-to-deal-with-files-in-elm-0-17 （它说它是针对 Elm 0.17 的，但在 Elm 0.18 中未更改也可以使用）。

这种方法的缺点是：

• 您的服务器需要对接收到的文件进行 base64 解码，这会略微增加服务器负载。
• 与文件/ blob 相比，base64 编码会增加将要传输的字节数量。

优点是：

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

从 Elm Http 文档中可以了解到：“目前仅支持字符串，但在 Elm 中为它们获得 API 后，我们将支持 blob 和文件。”

- sabine

Answer 4

使用类似于file-reader这样的库。

有一组相当全面的示例，您可以从这个开始。

然而，有一个警告。由于该库使用了一些本地代码，因此您无法从官方软件包存储库中获取它。因此，您将不得不手动安装它。

为此，我编写了这个hacky elm-package install替换工具。它在项目根目录中期望一个exact-dependencies.json文件。您可以最初从elm-package构建您的项目时创建的elm-stuff目录中获取此文件。然后，您可以像这样向exact-dependencies.json文件添加对file-reader软件包的引用：

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

接下来，你需要运行elm-package install，希望它能正常工作。

- MisterMetaphor

---

不错。我已经克隆了仓库并将检查它。我会尝试上传一个包含图像和Excel文件的表格，看看情况如何。 - ritcoder