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

Posted 2023-03-07

【中文标题】将文件附加到 FormData 在 angularjs 中不起作用

【英文标题】：append files to FormData not work in 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!");
        );

【参考方案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">

为我工作:)