Multer和AngularJS

Question

我無法弄清楚如何發佈角度$ http。爲什麼？我希望Mulder解析並存儲我的文件和角度，以便在完成時獲得副本。更好的是，我喜歡讓角色獲得副本，然後將其傳遞給服務器。

我可以使用下面的代碼片段上傳文件：

// view (jade) 
.container 
    form(action="/upload", method="POST", enctype="multipart/form-data") 
    input(type="file", name="f") 
    input(type="submit", value="Upload") 

// post route (express) 
var multer = require('multer'); 
var upload = multer({ dest: 'uploads/' }); 
app.post('/upload', upload.single('f'), function(req, res) { 
    console.log(req.file); 
}); 

與任何示例文件運行此，我想對JSON返回到控制檯和圖像被成功地存儲在正確的目錄。但是：

// view (jade) 
form(enctype="multipart/form-data" ng-submit="uploadFile(file)") 
input(type="file", name="f", ng-model="file") 
input(type="submit", value="Upload") 

// ctrl (angular) 
$scope.uploadFile = function(file) { 
    console.log(file); 
    $http.post('/upload', file); 
}; 

// post route (express) 
var multer = require('multer'); 
var upload = multer({ dest: 'uploads/' }); 
app.post('/upload', upload.single('f'), function(req, res) { 
    console.log(req.file); 
}); 

這將返回兩個控制檯輸入不確定的，即使我沒有改變的文件，我只是改變了它是如何被髮送。

這使我兩相信一兩件事情：提交

的數據是不是我認爲它是。如果是這樣的話，那是什麼？沒有在日誌上打印。

OR

提交的數據以某種方式通過角改變。如果是這樣的話，怎麼樣？再次沒有在日誌上打印。

Answer 1

在第一種情況下，通過將數據直接通過表單發送到服務器，您可以讓html在底層做出變形魔術。

在第二種情況下，通過通過$ http發佈AngularJs，您需要告訴中間件是$ http，它需要對請求進行的轉換以匹配您傳遞給表單的屬性。

因爲這段時間自己一直在掙扎一段時間，下面是我使用的代碼（用於$資源）的改編。但我認爲它應該適用於它的底層$ http。

所以在你的控制器：

$scope.uploadFile = function(file) { 
    console.log(file); 
    var fd = new FormData(); 
    fd.append('file', file); 
    $http.post(uploadUrl, fd, { 
     transformRequest: angular.identity, 
     headers: { 
      'Content-Type': undefined}, 
      enctype: 'multipart/form-data' 
     } 
    }) 
    .success(function(){ 
    }) 
    .error(function(){ 
    }); 
}; 

對於工作，你需要將文件輸入字段綁定到模型。當然，出於某些原因，Angularjs選擇不會原生做。

在玉視圖：

form(enctype="multipart/form-data" ng-submit....) 
    input(type="file", name="f", ng-model="file" on change='angular.element(this).scope().readFile(this)') 
    input(type="submit", value="Upload") 

onchange是JavaScript和不AngularJs和它觸發，我們需要定義scope.readfile（）函數：

在控制器：

$scope.readfile = function(elem) { 
    var file= elem.files[0]; 
    var reader = new FileReader(); 
    reader.onload = function() { 
     $scope.$apply(function(){ 
      $scope.file = file; 
      $scope.imageUrl = reader.result // to display   image via ng-Src 
     }) 
    } 
    reader.readAsDataURL(file); 
} 

我認爲在使用窗體時應該將一些html魔術帶回角度。

我建議你看看JavaScript的onchange,FormData和FileReader這些代碼片段和更好的文檔。