Hochladen von Datei in die Datenbank (Blob) mit Angular

Question

Ich möchte wissen, wie Datei mit AngularJS in die Datenbank hochladen. Ich habe ein Formular zum Erstellen neuer Entitäten mit vielen Feld (name, description, image, etc). Verwenden von Angular post Methoden, um Daten vom Client zu erhalten, danach verwende ich DTO, um Daten in mein Objekt zu konvertieren und in die Datenbank einzufügen. Ich nehme Objekt in Anforderung wie Bild unten, aber ich brauche byte[] zu bekommen es Spalte in die Datenbank blob Bild zu setzen ..

Das ist mein Service:

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; 
}]); 

Controller:

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"); 
    } 
}; 

}); 

Richtlinien

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

Ich verwende in der Regel angular-file-upload für das Hochladen von Dateien.

Answer 2

Sie benötigen Formdata() mit so etwas zu verwenden:

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} 
}); 

wo image kommt von Ihrem reader.readAsDataURL

Werfen Sie einen Blick here