javascript - AngularJS和FileReader如何将文件保存到路径

Question

关注此example关于如何使用 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);
        });
    }
}

Answer 1

我猜您想上传文件并通过一个请求传递特定路径到服务器。

要在一个 POST 请求中发送数据(此处为带有“路径”字段的 json)和文件，请将两者添加到表单数据:

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});
})

This tutorial显示如何仅上传文件。