Угловая загрузка файла без локального сервера?

Question

Я пытаюсь создать загрузку файла для приложения Angular. Я бы хотел, чтобы пользователи могли просматривать свою локальную файловую систему для загрузки файла, так же, как вы можете делать это на любом количестве обычных веб-сайтов.

Я использовал angular-file-upload для взаимодействия на стороне клиента, но поскольку для доступа к промежуточным файлам для загрузки требуется определенный маршрут, я не уверен, как заставить его работать с настройкой моего приложения. В процессе разработки приложение обслуживается с помощью Grunt и прокси на сервере, на котором работает веб-служба JAX-RS для данных. В работе приложение развертывается как WAR в том же экземпляре JBoss, что и WAR веб-службы JAX-RS. Обдумывая эту ситуацию, я чувствую, что у меня есть два варианта, ни один из которых не сработает:

1) Поддержите экспресс-сервер с Grunt, который имеет промежуточный маршрут. Это не сработает, потому что я предпочел бы, чтобы экспресс-сервер не работал в рабочей среде, и я не уверен, что это вообще возможно, поскольку приложение и веб-служба развернуты в JBoss?

2) Промежуточный маршрут будет проксировать, как и все остальные маршруты. Очевидно, что это не будет работать для загрузки с локального жесткого диска пользователя!

Я продолжаю думать, что должен быть другой, лучший вариант, который будет работать. Я посмотрел на то, как другие сайты предоставляют желаемую функциональность, и обнаружил этот поток, объясняющий, как клиент инициирует соединение TCP/IP с сервером. Тем не менее, я не уверен, что это правильный путь.

Может ли кто-нибудь предложить некоторое понимание? Это выходит за рамки моего опыта, и я был бы очень признателен!

заранее спасибо

Answer 1

Проверьте это, вы можете использовать HTML5 fileReader с $parse внутри директивы, которую вы применяете для ввода файла. Таким образом, вы просто загружаете файл в ваше клиентское приложение 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/