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

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

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

c:\MyFolder\somefile.txt

（我假设您的目标是浏览器而不是节点。如果您想要节点支持，请参阅其

fs

模块的文档。高级用法将类似于我下面描述的浏览器。）

目前还没有一个只支持Elm的API，所以您必须使用端口。非常有帮助，我将修改它的示例

简而言之，您必须使用

File

和

FileReader

API（），并在加载文件时通过端口将数据发送到Elm。（在我下面的示例中，对于提交的每个文件，Elm都会收到一条

GetFile{name:String，content:String}

消息。）

消息：

type Msg
    = GetFile File

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

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

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

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

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

端口：

type Msg
    = GetFile File

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

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

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

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

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

（不要忘记Elm源上的

端口模块

，而不是

模块

）

订阅：

type Msg
    = GetFile File

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

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

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

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

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

HTML文件输入：

type Msg
    = GetFile File

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

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

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

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

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

---

在

viewFile

函数中进行分割并执行不同的操作（即，不要试图将

内容

数据解释为图像

src

）。

Elm现在可以从0.19开始打开文件

步骤如下：

将事件处理程序附加到向更新函数发送适当消息的按钮

更新函数接收消息并运行文件打开函数，该函数告诉Elm运行时要求浏览器打开文件选择对话框

一旦用户操作完成，Elm运行时会将File类型的数据返回给update函数，update函数可以决定执行什么操作

要读取文件内容，必须调用文件读取函数。同样，该函数告诉Elm运行时读取文件的内容。运行时再次调用更新函数，这次传递文件的内容

---

请参阅，其中包括刚刚意识到这是服务器端的责任。不过，我会把它留在这里，因为我很好奇。