web-dev-qa-db-ja.com

Elmでのファイルのアップロード

Elmでファイル（画像またはExcel）をアップロードするにはどうすればよいですか？

例が見つからないようです。

ネイティブコードを使用している場合でも、答えは問題ありません。 Elm-HtmlでDataを見たことがありますが、ファイルとBLOBはサポートされていないようです。これを回避する方法は何ですか？

elm
19
ritcoder

私はMisterMetaphorが参照するライブラリの作者です。彼が説明するよりも使いやすいです。例でElm-package.jsonを設定する方法を見てください： https://github.com/simonh1000/file-reader/blob/master/example/Elm-package.json - "native-modules": true,を追加するだけです。

私は blog を作成して、0.18のコードのリリースをサポートし、たとえば、 S3はElmで実行できます。

21
Simon H

それを行う公式の方法は現在 https://package.Elm-lang.org/packages/Elm/file/latest/

これは、Elm0.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
    }
9
Marcelo Lazaroni

file-reader のようなライブラリを使用します。

かなり包括的な例のセットがあります。 これ から始めることができます。

ただし、注意点があります。このライブラリはいくつかのネイティブコードを使用しているため、公式パッケージリポジトリから取得することはできません。したがって、手動でインストールする必要があります。

この目的のために、私は このハッキーなElm-パッケージインストールの置き換え と書きました。プロジェクトのルートディレクトリに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 install replace を実行すると、うまくいくと思います。

7
MisterMetaphor

Elmでファイルのアップロードを処理する他のオプションは

  • ポートを介してFileReaderからElmアプリにbase64でエンコードされた値を取得します。
  • 次に、base64でエンコードされた値をサーバーに送信します（JSON本文など）。

チュートリアルはここにあります https://www.paramander.com/blog/using-ports-to-deal-with-files-in-Elm-0-17 （それはElm用だと言っています0.17ですが、Elm0.18では変更されません。

このアプローチの欠点は次のとおりです。

  • サーバーは受信したファイルをbase64でデコードする必要があります。これにより、サーバーの負荷が少し増加します。
  • base64-encodingは、（ファイル/ブロブと比較して）ネットワークを通過するバイト数を増やします。

利点：

  • ネイティブコードのパッケージを使用する必要はありません。

Elm Httpドキュメントから ：「現在は文字列のみをサポートしていますが、ElmでそれらのAPIを取得するときにblobとファイルをサポートします。」

6
sabine