Question

我正在尝试为Angular应用程序创建文件上传。我希望用户能够浏览他们的本地文件系统以获取要上传的文件，就像您可以在任意数量的常见网站上进行操作一样。

我一直在使用angular-file-upload进行客户端交互，但由于它需要特定的路由来访问上传的分阶段文件，因此我不确定如何使其与我的应用程序的设置一起使用。在开发过程中，应用程序与Grunt和代理一起提供给运行JAX-RS Web服务以获取数据的服务器。在生产中，应用程序在与Web服务JAX-RS WAR相同的JBoss实例中部署为WAR。考虑到这种情况，我觉得我有两个选择，两者都不会起作用：

1）使用具有暂存路径的Grunt站起来快速服务器。这是行不通的，因为我不想在生产中运行快速服务器，我不确定甚至可能因为应用程序和Web服务部署在JBoss中？

2）暂存路由将像所有其他路由一样进行代理。显然这不适用于从用户的本地硬盘上传！

我一直认为必须有另一个更好的选择才能奏效。我查看了其他站点如何允许我喜欢的功能，并找到this thread解释客户端如何启动与服务器的TCP / IP连接。但是，我不确定这是否是正确的选择。

有人能提供一些见解吗？这超出了我的经验范围，我真的很感激一些指导！

提前谢谢

Answer 1

检查一下，你可以在你应用于文件输入的指令中使用带有$ parse的HTML5 fileReader。通过这种方式，您只需将文件上传到客户端Angular应用程序即可。也许这个例子会有所帮助。

指令：

angular.module('core').directive('onReadFile', ['$parse',
    function($parse){
        return {
            restrict: 'A',
            scope: false, 
            link: function(scope, ele, attrs) {

                var fn = $parse(attrs.onReadFile);
                ele.on('change', function(onChangeEvent){
                    var reader = new FileReader();

                    reader.onload = function(onLoadEvent) {
                        scope.$apply(function(){
                            fn(scope, {$fileContents: onLoadEvent.target.result} )
                        })
                    }

                    reader.readAsText((onChangeEvent.srcElement || onChangeEvent.target).files[0]);
                })

            }
        }
    }
]);

在视图中使用它：

<div>
    <label>Select File</label>
    <input type="file" on-read-file="parseInputFile($fileContents)">
</div>

访问控制器中的文件数据：

$scope.parseInputFile = function(fileText){
    // do whatever you want w/ fileText...
}

您还可以将fileReader用于二进制文件（图像）：https://developer.mozilla.org/en-US/docs/Web/API/FileReader

此时，文件数据位于客户端Angular代码中，因此您可以将其发送到Java应用程序中的某个端点以进行永久存储。

以下是我从以下网站了解到的博客：http://veamospues.wordpress.com/2014/01/27/reading-files-with-angularjs/

没有本地服务器的Angular文件上传？

1 个答案: