使用Angular將文件上傳到數據庫（blob）

Question

我想知道如何使用AngularJS將文件上傳到數據庫。我有一個表單用於創建包含許多字段的新實體（name, description, image, etc）。使用Angular post方法從客戶端獲取數據，然後使用DTO將數據轉換爲我的對象並插入數據庫。我把物體像下面的圖像的要求，但我需要得到byte[]把它放到數據庫團塊圖像列..

這是我的服務：

app.factory('lotService', [ '$http', function($http) { 
var baseUrl = '/lotdata'; 
var lotService = {}; 
lotService.getLot = function(lotId) { 
     var lot = $http.get(baseUrl + "/" + lotId).then(
       function(response) { 
        return response.data; 
       }); 
     return lot; 
    } 
lotService.updateLot = function (lot){ 
    return $http.put(baseUrl, lot); 
} 
lotService.getLotsByPerson = function(personId){ 
    return $http.get("/persons/" + personId + "/lots"); 
} 
lotService.insertLot = function(lot){ 
    console.log(lot); 
    return $http.post(baseUrl, lot); 
} 
return lotService; 
}]); 

控制器：

app.controller("CreateLotController", function($scope, $localStorage, lotService, categoryService){ 
var l = this; 
l.name; 
l.info; 
l.subcat; 
l.number; 
l.state; 
l.buyprice; 
l.commision; 
l.startprice; 
l.startdate; 
l.dutartion; 
l.redemption; 
l.ownerid; 
l.bidid; 
l.img; 
l.categories; 
l.allcategories; 
getCategories(); 
getAllCategories(); 


function getCategories() { 
     categoryService.getCategories().then(
      function(response) { 
       l.categories = response.data; 
      }, 
      function(error) { 
       l.status = 'Unable to load categories data: ' 
       + error.message; 
      }); 
     } 

function getAllCategories() { 
     categoryService.getAllCategories().then(
      function(response) { 
       l.allcategories = response.data; 
      }, 
      function(error) { 
       l.status = 'Unable to load categories data: ' 
       + error.message; 
      }); 
     } 

l.insertLot = function(cid) { 

if($localStorage.curruser.id != undefined){ 
    var lot = { 

     name : l.name, 
     info : l.info, 
     categoryId : cid, 
     number : "1", 
     stateId : null, 
     buyPrice : null, 
     commission : "1", 
     startPrice : l.startprice, 
     startDate : l.startdate, 
     duration : "3000", 
     redemption : l.redemption, 
     ownerId : $localStorage.curruser.id, 
     bidId : null, 
     img : l.img 
    }; 
    lotService.insertLot(lot).then(function(response){ 
     console.log(response); 
     l.success = true; 
    }, function(error){ 
     l.status = 'Unable to create lot: ' + error; 
     console.log(error); 
    }); 
}else{ 
     console.log("Not logged"); 
    } 
}; 

}); 

指令

app.directive("fileread", [function() { 
return { 
    scope: { 
     fileread: "=" 
    }, 
    link: function (scope, element, attributes) { 
     element.bind("change", function (changeEvent) { 
      var reader = new FileReader(); 
      reader.onload = function (loadEvent) { 
       scope.$apply(function() { 
        scope.fileread = loadEvent.target.result; 
       }); 
      } 
      reader.readAsDataURL(changeEvent.target.files[0]); 
     }); 
    } 
} 
}]); 

AND View Lot.jsp

<input type="file" fileread="newLotCtrl.img" style="display:inline;">[enter image description here][1] 

Answer 1

我通常使用angular-file-upload的文件上傳。

Answer 2

你需要的是這樣使用FORMDATA（）：

var fd = new FormData(); 
fd.append('name', name); 
fd.append('description', description); 
fd.append('image', image); 
$http.post(baseUrl, fd, { 
    transformRequest: angular.identity, 
    headers: {'Content-Type': undefined} 
}); 

其中image從您的reader.readAsDataURL

來看看here