在Elm中上传文件

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,.

我写了一篇博客来支持0.18代码的发布,并展示了如何在Elm中完成上传到S3的过程.

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

使用像文件阅读器这样的库.

有一套非常全面的例子,你可以从这个例子开始.

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

为此,我写了这个hacky elm-package安装替换.它期望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"
}

在此之后,您运行elm-package安装替换,希望它可以工作.

Answer 4

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

• 通过端口从FileReader获取base64编码的值到您的Elm应用程序.
• 然后,将该base64编码的值发送到您的服务器(例如,在JSON主体中).

可以在这里找到一个教程https://www.paramander.com/blog/using-ports-to-deal-with-files-in-elm-0-17(它表示它适用于榆木0.17,但它的工作原理不变榆木0.18).

这种方法的缺点是

• 您的服务器需要对它接收的文件进行base64解码,这会增加服务器负载,并且
• base64-encoding会增加通过线路的字节数(与文件/ blob相比).

好处:

• 无需使用包含本机代码的包.

来自Elm Http文档:"现在它只支持字符串,但是当我们在Elm中为它们获取API时,我们将支持blob和文件."