将文件附加到 FormData 在 angularjs 中不起作用答案

【问题标题】：append files to FormData not work in angularjs将文件附加到 FormData 在 angularjs 中不起作用
【发布时间】：2013-11-03 23:10:45
【问题描述】：

我使用 angularjs 在单个请求中将文件和 json 对象上传到 nodejs 服务器。然后我在 firebug 上得到了这个 console.log：

-----------------------------8791641017658 Content-Disposition: form-data; name="model" {"phone":"asasasa","description":"121212112","payment":"2121212121","shipping":"121221221","imageurl":"21212112","price":"212112212","status":"new"} -----------------------------8791641017658--

所以，name="file" 没有出现在这里。

以及nodejs服务器// print out "{}"中的console.log(req.files)

请帮忙，谢谢！

$scope.files = [];

        $scope.$on("fileSelected", function (event, args) {

        $scope.$apply(function () {            
            //add the file object to the scope's files collection
            $scope.files.push(args.file);
            console.log($scope.files);

        });
        });

    $scope.create = function() {
        $scope.seller_submit = {
            phone: this.phone,
            description: this.description,
            payment: this.payment,
            shipping: this.shipping,
            imageurl: this.imageurl,
            price: this.price,
            status: this.status
        };

        $http({
            method: 'POST',
            url: '/articles/'+ $routeParams.articleId,

            headers: { 'Content-Type': undefined },

            transformRequest: function (data) {
                var formData = new FormData();

                formData.append("model", angular.toJson(data.model));

                for (var i = 0; i < data.files; i++) {

                    formData.append("file" + i, data.files[i]);
                }
                return formData;
            },

            data: { model: $scope.seller_submit, files: $scope.files }

        }).
        success(function (data, status, headers, config) {
            alert("success!");
        }).
        error(function (data, status, headers, config) {
            alert("failed!");
        });

【问题讨论】：

标签： node.js http angularjs form-data

【解决方案1】：

你可以为此创建一个服务

myApp.service('uploadsService', function($http) {   

    var code = '';
    var fileName = '';


    this.uploadFile = function(files) {


        var fd = new FormData();

        //Take the first selected file
        fd.append("image", files[0]);

        var promise =  $http.post('/uploads/uploadFile.json', fd, {
                withCredentials: true,
                headers: {'Content-Type': undefined },
                transformRequest: angular.identity
            }).then(function(response) {

            code = response.data.code;
            fileName = response.data.fileName;

            return{
                code: function() {
                    return code;
                },
                fileName: function() {
                    return fileName;
                }
            }; 
        });
        return promise;
    };

  });

因此您可以在控制器中执行以下操作：

    $scope.uploadFile = function(files) {

                    uploadsService.uploadFile(files).then(function(promise){

                        $scope.code = promise.code();
                        $scope.fileName = promise.fileName();
     });

   };

在你看来：

<input type="file" onchange="angular.element(this).scope().uploadFile(this.files)" ng-model="image">

为我工作:)

【讨论】：