AngluarJS и FileReader, как сохранить файл в путь - PullRequest
0 голосов
/ 24 мая 2018

Следуя этому примеру о том, как загружать файлы с помощью AngularJS, я не могу понять, как это на самом деле работает.

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

HTML-код:

<div ng-controller="MyCtrl">
    <div ng-repeat="step in stepsModel">
        <img class="thumb" ng-src="{{step}}" />
    </div>
    <input type='file' ng-model-instant onchange="angular.element(this).scope().imageUpload(event)" multiple />
</div>

JS:

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.stepsModel = [];

    $scope.imageUpload = function(event){
         var files = event.target.files; //FileList object

         for (var i = 0; i < files.length; i++) {
             var file = files[i];
                 var reader = new FileReader();
                 reader.onload = $scope.imageIsLoaded; 
                 reader.readAsDataURL(file);
         }
    }

    $scope.imageIsLoaded = function(e){
        $scope.$apply(function() {
            $scope.stepsModel.push(e.target.result);
        });
    }
}

1 Ответ

0 голосов
/ 24 мая 2018

Полагаю, вы хотите загрузить файл и передать конкретный путь одним запросом на сервер.

Чтобы отправить данные (здесь json с полем 'path') и файл в одном запросе POST, добавьте оба к данным формы:

myApp.service('fileUpload', ['$http', function ($http) {
    this.uploadFileToUrl = function(file, uploadUrl){
        var fd = new FormData();
        fd.append('file', file);

        var info = {
            "path":"specific path"
        };
        fd.append('data', angular.toJson(info));

        $http.post(uploadUrl, fd, {
             transformRequest: angular.identity,
             headers: {'Content-Type': undefined}
        })

        .success(function(){
        })

        .error(function(){
        });
    }
}]);

На стороне сервера это в req.body.data, поэтомуможно получить, например, так:

upload(req, res, function (err) {
    if (err) {
        res.json({error_code: 1, err_desc: err});
        return;
    }

    console.log(req.body.data);

    res.json({error_code: 0, err_desc: null});
})

В этом руководстве показано, как загрузить только файл.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...