Question

我正在使用angular2构建导入工具。该过程是允许用户提供csv文件，然后填写他们希望数据映射到系统的方式。所以步骤将是 1.选择本地文件（使用文件上传） 2.不是将文件发送到服务器，而是将其加载到angular2内的数组中，然后显示在屏幕上。

有没有这方面的例子。

Answer 1

使用JavaScript访问本地文件系统中的文件会遇到很多麻烦，主要是因为出于安全原因（想象病毒），浏览器不允许您这样做。您的JavaScript代码在隔离的沙箱上运行，因此设计无法执行此操作（请查看https://stackoverflow.com/a/33803293/165606以获取有关该主题的参考信息。）

加载本地文本文件的唯一方法是将它们重命名为“.js”文件（手动），将它们添加到项目文件夹中并将它们包含在HTML标题中，或使用某种中间件（如Cordova）（如果你正在制作一个移动应用程序），或者做一些特定于浏览器的高级配置来停用文件系统安全规则（对于非技术用户而言，这是非常简单的。）

如果您决定使用上传的文件，可以使用Angular 2上传和打开CSV文件的一些库和演示。

文件上传：

https://github.com/valor-software/ng2-file-upload

演示：http://valor-software.com/ng2-file-upload/

读取CSV：

http://blog.sodhanalibrary.com/2016/10/read-csv-data-using-angular-2.html#.WV1-cXXyuHs

演示：http://demo.sodhanalibrary.com/angular2/readCsvData.html

Answer 2

所以我能够通过使用有人发布的这个小提琴来证明我可以使用它。 http://jsfiddle.net/thzytf1w/2/

var fileInput = document.getElementById("csv"),

readFile = function () {
    var reader = new FileReader();
    reader.onload = function () {
        document.getElementById('out').innerHTML = reader.result;
    };
    // start reading the file. When it is done, calls the onload event defined above.
    reader.readAsBinaryString(fileInput.files[0]);
};

fileInput.addEventListener('change', readFile);

我正在使用angular2

进行工作

预处理angular2上传文件

2 个答案: