上傳角度，表達，貓鼬的圖片

Question

我試圖上傳和存儲與貓鼬，表達和角度的圖片。我在這裏選擇了下一個解決方案：

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

而接下來的功能控制器：

$scope.uploadFile=function(){ 
    var fd = new FormData(); 
    angular.forEach($scope.files,function(file){ 
       fd.append('file',file); 
      }); 

      $http.post('http://' + host + ':3000/users/' + $scope.selectedTask._id,fd, 
       { 
       transformRequest: angular.identity, 
       headers: {'Content-Type': undefined} 
       }).success(function(d){ 
        console.log('yes'); 
       }) 
      } 

和HTML：

<input type = "file" file-model="files" multiple/> 
<button ng-click = "uploadFile()">upload me</button> 
<li ng-repeat="file in files">{{file.name}}</li> 

但由於某些原因，所有我在我得到我的端點是一個空的請求對象。我用下面的代碼檢查它在express.js：

user.route('/users/:id') 
.post(function (req, res, next) { 
    console.log(req.body); 
}) 

請幫我帶圖像的上傳並將其存儲在與貓鼬MongoDB的，因爲我不知道該如何存儲在那裏的東西，這大於16 mb。

Answer 1

在本例中，您將看到如何將發送的文件存儲到服務器目錄中，然後從那裏接收並保存它們。你也可以直接保存它們。 首先你用角度拿起文件，如果你想你可以 check here瞭解更多詳情。 這是我的小例子，代碼是在玉石中。

input(type="file" name="file" onchange="angular.element(this).scope().selectFile(this.files)") 
button(ng-click='savePhoto()') Save 

在您的角度控制器

$scope.savePhoto = function() { 
var fd = new FormData(); 
    fd.append("file", $scope.files[0]); 
)) ; 
$http.post("/xxx/photos", fd, { 
     withCredentials: true, 
     headers: { 'Content-Type': undefined }, 
     transformRequest: angular.identity 
     }).success(function (data) { 
     $scope.image = data; // If you want to render the image after successfully uploading in your db 
     }); 
    }; 

在後端使用NPM安裝multer。然後在app.js中，您可以設置一箇中間件來收集您發送的文件。只需在這裏執行console.log（req），以檢查是否在此處獲取文件。 Multer在這裏做魔術。

app.use(multer({ 
    dest: path.join(__dirname, 'public/assets/img/profile'), 
    rename: function (fieldname, filename, req, res) { 
     console.log(req)// you will see your image url etc. 
    if(req.session.user) return req.session.user.id; 
    } 
})); 

所以這裏的圖像將存儲在你的服務器的這個路徑（公共/ assets/img/profile）。 現在你從這個服務器拿起文件並添加到你的數據庫。

var path = require('path'); 
    var imgPath =path.join(__dirname, '../public/assets/img/profile/' + id + '.jpg'); // this is the path to your server where multer already has stored your image 
     console.log(imgPath); 
     var a ; 

     a = fs.readFileSync(imgPath); 
     YourSchema.findByIdAndUpdate(id, { 
      $set: 
      {'img.data' : a, 
       'img.contentType' : 'image/png' } 
      }, function(err, doc) { 
      if (err)console.log("oi"); 

      } 
    ); 

    //In case you want to send back the stored image from the db. 
     yourSchema.findById(id, function (err, doc) { 
     if (err)console.log(err); 

     var base64 = doc.img.data.toString('base64'); 
     res.send('data:'+doc.img.contentType+';base64,' + base64); 

     }); 

架構中的店型的緩衝

img: { data: Buffer}