2017-02-09 31 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

字段名稱不是網絡形式和multer配置相同:

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

看起來像fd在fronend代碼是空的。不明白爲什麼 – 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"); 
}) 
相關問題