2016-02-11 6 views
13

Как загрузить файл (изображение или Excel) в Elm?Загрузка файла в Elm

Невозможно найти примеры.

Ответ хорошо, даже если используется собственный код. Увидели Data в Elm-Html, но он кажется, что файлы и капли не поддерживаются. Каким образом это происходит?

ответ

18

Я являюсь автором библиотеки, на которую ссылается Мистер Метафор. Это проще в использовании, чем объясняет он. Посмотрите, как я установил elm-package.json в примере: https://github.com/simonh1000/file-reader/blob/master/example/elm-package.json - просто добавьте "native-modules": true,.

Я написал blog, чтобы поддержать выпуск кода для 0,18 и показать, как загружать, например. S3 можно сделать в Elm.

+1

Получил работу, установив native-modules в true, включая пакет elm-mimetype, и добавив папку src файла-читателя в исходные каталоги. После этого все было прямо. – ritcoder

6

Используйте библиотеку, такую ​​как 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 и, надеюсь, он сработает.

+0

Прохладный. Я клонировал репо и проверю его. Попробуйте загрузить форму с изображением и файл excel, чтобы посмотреть, как это происходит. – ritcoder

3

Другой вариант для обработки загрузки файлов в Элм является

  • получить base64-закодированные значения из FileReader в приложение Вязов через порт.
  • Затем отправьте это base64-кодированное значение на ваш сервер (например, в корпусе JSON).

Учебное пособие можно найти здесь https://www.paramander.com/blog/using-ports-to-deal-with-files-in-elm-0-17 (он говорит, что это для Вязов 0.17, но он не изменяется в Elm 0.18).

Недостатками этого подхода являются

  • ваш сервер должен base64-декодировать файлы, которые он получает, что увеличивает нагрузку на сервер немного, и
  • base64-кодирование увеличивает количество байтов, которые будут идти в течение провод (по сравнению с файлом/блобом).

Достоинства:

  • нет необходимости использовать пакет с машинным кодом.

From the Elm Http docs: «Сейчас он поддерживает только строки, но мы будем поддерживать blobs и файлы, когда мы получим API для них в Elm».