Question

在Elm中，如何访问本地驱动器上的文件？

例如，我需要访问该文件：

c:\MyFolder\somefile.txt

Answer 1

（我假设你的目标是浏览器，而不是Node。如果你想要Node支持，here是它的fs模块的文档。高级用法将类似于我在下面对浏览器的描述。）

还没有（仅）Elm-only API，因此您必须使用端口。 This article非常有用，我会调整其示例。

简而言之，您必须使用File和FileReader API（caniuse.com），并在加载文件时通过端口将数据发送到Elm。（在下面的示例中，Elm会针对提交的每个文件收到GetFile {name : String, content : String}条消息。）Here is a working example in Ellie.

<强>信息：

type Msg
    = GetFile File

type alias File =
    { name : String
    , content : String
    }

端口：

port getFile : (File -> msg) -> Sub msg

（不要忘记port module代替module在Elm来源之上）

<强>订阅：

subscriptions : Model -> Sub Msg subscriptions model = getFile GetFile

HTML文件输入：

<input type="file" id="files" name="files[]" multiple />

JS（主要部分！）：

<script> var app = Elm.Main.fullscreen(); function handleFileSelect(evt) { var files = evt.target.files; for (var i = 0, f; f = files[i]; i++) { if (!f.type.match('image.*')) { continue; } var reader = new FileReader(); reader.onload = (function(theFile) { return function(e) { app.ports.getFile.send({name: theFile.name, content: e.target.result}); }; })(f); reader.readAsDataURL(f); } } document.getElementById('files').addEventListener('change', handleFileSelect, false); </script>

编辑：此示例仅接受图片。如果您不想这样，请删除

if (!f.type.match('image.*')) { continue; }

部分并在viewFile函数中执行不同的操作（即，不要尝试将content数据解释为图像src）。

Answer 2

Elm现在可以打开0.19以上的文件。

步骤如下：

将事件处理程序附加到将适当的消息发送到更新功能的按钮上。
更新功能接收消息并运行文件打开功能，该功能告诉Elm运行时要求浏览器打开文件选择对话框。
完成用户操作后，Elm运行时会将类型为File的数据返回给更新函数，然后更新函数可以决定要做什么。
要读取文件的内容，必须调用文件读取功能。同样，该函数告诉Elm运行时读取文件的内容。运行时再次调用您的更新功能，这一次传递文件的内容。

请参阅this thread on Elm discourse，其中包括this example on Ellie app

如何访问本地驱动器上的文件？

2 个答案: