用AngularJS和Express.js上傳文件

我想用AngularJS和Node.js（用Express.js）上傳文件。我正在使用danialfarid/angular-file-upload。在我看來（我用玉）我有用AngularJS和Express.js上傳文件

label Upload avatar 
input(type="file" ng-file-select='uploadAvatar($files)' accept="image/png, image/jpeg") 
span(ng-show='uploadInProgress') Upload progress: {{ uploadProgress }} 
img(ng-src='uploadedAvatar' ng-if='uploadedAvatar')

下面是我的控制器的uploadAvatar功能（我用的CoffeeScript在前端，here是編譯JavaScript版本）：

$scope.uploadAvatar = (image) -> 
    if angular.isArray image 
    image = image[0] 

    if image.type isnt 'image/png' and image.type isnt 'image/jpeg' 
    alert('Only PNG and JPEG are supported') 
    return 

    $scope.uploadInProgress = true 
    $scope.uploadProgress = 0 

    $scope.upload = $upload.upload({ 
    url: '/api/users/avatar', 
    method: 'POST', 
    file: image 
    }).progress((event) -> 
    $scope.uploadProgress = Math.floor(event.loaded/event.total) 
    $scope.$apply() 
).success((data, status, headers, config) -> 
    $scope.uploadInProgress = false 
    $scope.uploadedAvatar = JSON.parse(data) 
).error((err) -> 
    $scope.uploadInProgress = false 
    alert "error" 
    console.log "error: #{err.message || err}" 
)

這裏是我的路線：

app.post('/api/users/avatar', middleware.auth, users.uploadAvatar);

而問題是，在我的users.uploadAvatar控制器我不能訪問文件：

exports.uploadAvatar = function(req, res, next) { 
    var currentUser = req.user; 
    console.log(req.files); // Output is undefined 
    // Some other code 
}

來源

2014-08-28 artur.balabanov

你忘了使用bodyParser，但現在沒有多處理，所以你必須使用multiparty和它的小兄弟connect-multiparty。使用快遞4.x或3.x：

var multipart = require('connect-multiparty'); 
app.post('/api/users/avatar', middleware.auth, multipart(), users.uploadAvatar);

來源

2014-08-28 12:58:57 Vinz243

用AngularJS和Express.js上傳文件

回答

相關問題