无法从客户端将文件数据发送到nodejs服务器

Question

我正在 Angular js(v1.3.4) 中创建简单的文件上传模块。我正在使用 Nodejs 服务器端。我正在使用 https://github.com/danialfarid/angular-file-upload 库。它看起来很简单，但我停留在基本步骤。

index.html

<div ng-controller="FileUploadController">   
        <input type="file" ng-file-select="onFileSelect($files)" multiple>  
</div>

controller.js

  $scope.onFileSelect = function($files) {

                for (var i = 0; i < $files.length; i++) {
                    var file = $files[i];
                    $scope.upload = $upload.upload({
                        url: 'http://localhost:8080/file-transfer/123/upload', 

                       // headers: {'Content-Type': undefined},
                       //     withCredentials: true,
                       //     transformRequest: angular.identity,
                       file: file       
                    }).progress(function(evt) {
                            console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
                        }).success(function(data, status, headers, config) {
                            // file is uploaded successfully
                            console.log(data);
                        });
                }

在服务器端，我使用 multer 作为 multipart 。客户端正在向服务器发送请求但未发送文件数据。

app.all('/file-transfer/:id/upload', function (req, res) {
    res.header('Access-Control-Allow-Credentials', true);
    res.header('Access-Control-Allow-Origin', req.headers.origin);
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', 'X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept');
    console.log(req.body);     // prints - {}
    console.log(req.files);   // prints -  {}
});

请求Header-

Accept  text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Encoding gzip, deflate
Accept-Language en-US,en;q=0.5
Access-Control-Request-Me...    POST
Cache-Control   no-cache
Connection  keep-alive
Host    localhost:8080
Origin  http://localhost
Pragma  no-cache
User-Agent  Mozilla/5.0 (Windows NT 6.2; WOW64; rv:34.0) Gecko/20100101 Firefox/34.0

我使用了与 repository.Maybe 示例中相同的代码，我遗漏了一些东西。

注意 - 当我使用不带 angular 的简单 html 5 形式或如果我使用 $http.post.

EDIT : 这是CORS问题，阅读答案的评论。

Answer 1

我正在使用相同的库，我的客户端代码中唯一不同的是我发送了 method: 'POST' header：

            $scope.upload = $upload.upload({
                url: '/api/uploads', //upload.php script, node.js route, or servlet url
                // method: 'POST' or 'PUT',
                method: 'POST',
                // headers: {'header-key': 'header-value'},
                // withCredentials: true,
                data: { type: 'profileImage' },
                file: file//, // or list of files: $files for html5 only
                // fileName: 'doc.jpg' or ['1.jpg', '2.jpg', ...] // to modify the name of the file
                /* customize file formData name ('Content-Desposition'), server side file variable name.
                 Default is 'file' */
                //fileFormDataName: myFile, //or a list of names for multiple files (html5).
                /* customize how data is added to formData. See #40#issuecomment-28612000 for sample code */
                //formDataAppender: function(formData, key, val){}
            }).progress(function (e) {
                console.log('percent: ' + parseInt(100.0 * e.loaded / e.total));
            }).success(function (data, status, headers, config) {
                // file is uploaded successfully
                console.log(data);
                $scope.user.profileImages = data;
                $rootScope.$emit('message', { text: "Your profile image has been updated." });
            }).error(function(data){
                if ( data.error === 'UnsupportedFiletype' ) {
                    $rootScope.$emit('message', { type: 'error', text: "Woops, we don't support that filetype." });
                }
            });

编辑：解决方案是正确地提供一个 cors header:

npm install cors 和 app.use(cors()).

无法从客户端将文件数据发送到nodejs服务器

Unable to send file data to nodejs server from client side

javascript

file-upload

node.js

angularjs