node.js - 将文件附加到 FormData 在 angularjs 中不起作用

Question

我使用 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服务器中的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!");
        });

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

  });

所以你可以在你的 Controller 中做类似的事情:

    $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">

对我有用:)