1

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

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

1) 使用具有暂存路由的 Grunt 建立一个快速服务器。这是行不通的，因为我不希望在生产中运行快速服务器，而且我不确定这是否可能，因为应用程序和 Web 服务部署在 JBoss 中？

2) 登台路由将像所有其他路由一样代理。显然，这不适用于从用户的本地硬盘上传！

我一直在想，必须有另一个更好的选择。我查看了其他站点如何允许我想要的功能，并发现这个线程解释了客户端如何启动与服务器的 TCP/IP 连接。但是，我不确定这是否是正确的选择。

谁能提供一些见解？这超出了我的经验范围，我非常感谢一些指导！

先感谢您

4

1 回答 1

3

检查一下，您可以在应用于文件输入的指令中使用带有 $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/

于 2014-09-05T23:52:22.927 回答