2016-04-07 9 views
0

ファイルをアップロードするのにng-file-uploadとmultipartyを使用しようとしていますが、files.file undefinedエラー「この問題はNG-ファイルのアップロードや、マルチパーティによって引き起こされるよく分からない、私はこの上で、ほぼ20時間を過ごす.....ここファイルをアップロードするためにng-file-uploadとmultipartyを使用してファイルをアップロードしようとしています

<div class="modal-footer"> 
    <div class="btn-group"> 
     <label title="Upload" for="fileInput" class="btn btn-primary"> 
     <input type="file" accept="image/*" id="fileInput" class="hide"> 
     Upload new image 
     </label> 
    </div> 
    <button ng-click="uploadAvatar(croppedAvatarImage)" type="button" class="btn btn-primary">Save changes</button> 
</div> 
users.client.view.html私のコード です

users.client.controller.js

$scope.uploadAvatar = function(image) { 
    $scope.uploadInProgress = true; 

    $scope.uploadProgress = 0; 
     if (angular.isArray(image)) { 
      image = image[0]; 
     } 
     Upload.upload({ 
      url: '/api/v1/user/me/avatar', 
      headers: { 
       'Content-Type': 'multipart/form-data' 
      }, 
      method: 'POST', 
      data: { 
       file: image 
      } 
     }).success(function(data, status, headers, config) { 
      console.log("upload success!"); 
      $scope.$apply(); 
     }).error(function(err) { 
      $scope.uploadInProgress = false; 
      console.log("upload failed!"); 
    }); 
}; 

users.profile.server.controller.js

exports.uploadAvatar = function(req, res) { 
    var form = new multiparty.Form(); 
    form.parse(req, function(err, fields, files) { 

     Object.keys(files).forEach(function(name) { 
      console.log('got file named ' + name); 
     }); 

     console.log(files, files.file); 

     var file = files.file[0]; // HERE THE PROGRAM CRASHED BY THE ERROR "Cannot read property '0' of undefined" 
     var contentType = file.headers['content-type']; 
     var extension = file.path.substring(file.path.lastIndexOf('.')); 
     var destPath = '/' + user.id + '/profile' + '/' + uuid.v4() + extension; 

     var headers = { 
      'x-amz-acl': 'public-read', 
      'Content-Length': file.size, 
      'Content-Type': contentType 
     }; 
     var uploader = s3Client.upload(file.path, destPath, headers); 

     uploader.on('error', function(err) { 
      res.status(500).send(err); 
      //TODO handle this 
     }); 

     uploader.on('end', function(url) { 
      //TODO do something with the url 
      console.log('file opened:', url); 
     }); 
    }); 
}; 

答えて

0

Ok I fina私は実際にBase64をファイルとしてアップロードしようとしています。なぜならimgはBase64の文字列であるngCropからのものですから、ファイルフィールドには見つかりませんでした。

1

ファイルは、プロパティ名は、フィールド名で、値がファイルオブジェクトの配列ですオブジェクトです。だからあなたはフィールドに名前を追加し、それを使ってファイル配列を取得しようとします。

<input type="file" accept="image/*" id="fileInput" name="fileInput" class="hide"> 

users.profile.server.controller.jsで:コード

var file = files.file[0]; 

以下

変更にname属性を追加users.client.view.htmlで

var file = files.fileInput[0]; 
+0

あなたのアドバイスをいただきありがとうございます!しかし問題は、私は** console.log(ファイル)**を試して、出力は何もバックエンドにアップロードしないことを意味する{}ですが、実際にはどの部分がポイントであるかを知ることができません。 – C0deZ

+0

フィールドを定義するだけですしかし、req.filesは常に空です – C0deZ

関連する問題