3

我从 AngularJS 发布到一个强大的表单，但该表单无法解析。我不使用 express.bodyParser()，我理解这通常是一个问题。

服务器端：

...
var form = new formidable.IncomingForm();
console.log(form); //this prints
//Get access to the other fields of the request. 
form.parse(req, function (err, fields, files) {
    console.log("parsing.."); //this does not print
    console.log(fields);
    console.log(files);`
...

客户端：

...
$http({
    method: 'POST',
    url: '/api/ad',
    data: message, // your original form data,
    transformRequest: formDataObject,  // this sends your data to the formDataObject provider that we are defining below. `[see this](https://stackoverflow.com/questions/17629126/how-to-upload-a-file-using-angularjs-like-the-traditional-way)`
    headers: {'Content-Type': undefined}
                    })
    .success(function(data, status, headers, config){
                        deferred.resolve(data); ` 
...

使用 formData 对象发布表单 Angular 时，我必须将内容/类型设置为未定义，如此处的评论中所述。这可能是强大的问题吗？

我一直在用几个小时试图解决这个问题，但没有运气。我将非常感谢任何答案！

4

1 回答 1

2

我想通了。我必须将文件绑定到控制器，以及使用 angular.identity 函数。基于这个很好的解释，我在我的角度代码中添加了以下内容，以便将文件绑定到控制器：`

myApp.directive('fileModel', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var model = $parse(attrs.fileModel);
            var modelSetter = model.assign;`

            element.bind('change', function(){
                scope.$apply(function(){
                    modelSetter(scope, element[0].files[0]);
                });
            });
        }
    };
}]);

以及以下将我的表单发布到我想要的网址：

myApp.service('fileUpload', ['$http', function ($http) {
    this.uploadFileToUrl = function(data, uploadUrl){
        var fd = new FormData();
        angular.forEach(data, function(value, key) {
            fd.append(key, value);
        });
        $http.post(uploadUrl, fd, {
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined}
        })
        .success(function(retObj){
        console.log(retObj);
        })
        .error(function(retObj){
        console.log(retObj);
        });
    }
}]);

在控制器的提交功能中，我现在添加：

var formData = $scope.newForm;
        var uploadUrl = '/api/add';
        fileUpload.uploadFileToUrl(formData, uploadUrl);

在我的 html 中，files-inputs 获取以下标签以使用创建的文件模型：

<input type="file" file-model="newForm.image1">

我的文本输入像以前一样被绑定：

<input type="text" ng-model="newForm.title">

希望这对其他人有帮助:)

于 2014-03-13T16:43:55.450 回答