2017-02-09 13 views
1

Node.jsアプリケーションにファイルを送信したいと思いますが、アプリケーションは何も受信していないようです。私は何をすべきか分からない。ファイルを送ったかどうかをチェックして、それをreqで受け取っている場合はどうすればいいですか?AngularからNode Expressへファイルを送信する

<form> 
    <input type = "file" file-model="files" multiple/> 
    <button class="md-primary md-button md-cyan-theme md-ink-ripple" ng-click = "vm.uploadFile()">upload me</button> 
</form> 

これは私のコントローラである:

function uploadFile() { 
    console.log("Load"); 

    var fd = new FormData(); 
    console.log($scope.files) // FileList {0: File, Length: 1} 

    angular.forEach($scope.files, function (file) { 
    fd.append('file', file); 
    }); 

    console.log(fd); // FormData {} (Empty?) 

    $http.post('http://localhost:8090/file-upload'), { 
    headers: {'Content-Type': undefined }, 
    files: fd 
    }).success(function (d) { 
    console.log(d); 
    }); 
} 

これは私のディレクティブです:ここでは

.directive('fileMode', ['$parse', function ($parse) { 
    return { 
    restrict: 'A', 
    link: function (scope, element, attrs) { 
     element.bind('change', function() { 
     $parse(attrs.fileModel).assign(scope, elemtn[0].files); 
     scope.$apply(); 
     }); 
    } 
    }; 
}]) 

は私エクスプレスアプリです:

app.post('/file-upload', function (req, res, next) { 
    console.log("Sent!"); 

    var storage = multer.diskStorage({ 
    destination: function (req, file, callback) { 
     callback(null, './uploads'); 
    }, 
    filename: function (req, file, cb) { 
     cb(null, file.fieldname); 
    } 
    }); 

    var upload = multer({ storage : Storage }).array('userPhoto', 2); 
    upload(req, res, function (err) { 
    console.log(req.body.data.files); 

    if (err) return res.end("Error uploading file."); 
    res.end("File is uploaded."); 
    }) 
}) 

は助けてくれてありがとう。これは動作します

+0

何あなたのバックエンドのコードは? – Aer0

+0

バックエンドコードが追加されました – Serhiy

答えて

1

フィールド名は、Webフォームでとmulter構成で同じではありません。

var upload = multer({ storage : storage }).array('file',2); 
+0

fronendコード内のfdのように思われるコードが空です。 – Serhiy

0

願っています!

var express  = require('express'), 
    app   = express(), 
    bodyParser = require('body-parser'), 
    multer  = require('multer'); 

app.use(function (req, res, next) { 
    res.header("Access-Control-Allow-Origin", "http://localhost"); 
    res.header(
    "Access-Control-Allow-Origin", 
    "Origin, X-Requested-With, Content-Type, Accept" 
); 
    next(); 
}); 

app.use(express.static('../client')); 
app.use(bodyParser.json()); 

var storage = multer.diskStorage({ 
    destination: function (req, file, cb) { 
    cb(null, './uploads/'); 
    }, 
    filename: function (req, file, cb) { 
    var split = file.originalname.split('.'); 
    cb(null, file.fieldname + "-" + Date.now() + "." + split[split.length - 1]); 
    } 
}); 
var upload = multer({ storage : storage }).single('file'); 


app.post('/upload', function (req, res) { 
    upload(req, res, function (err) { 
    if (err) res.json({ error_code: 1, err_desc: err }); 
    res.json({error_code: 0, err_desc: null }); 
    }) 
}) 
app.listen('3000', function() { 
    console.log("Running on 3000"); 
}) 
関連する問題