使用 Angular 将文件上传到数据库（blob）答案

【问题标题】：Upload file to database (blob) using Angular使用 Angular 将文件上传到数据库（blob）
【发布时间】：2016-12-30 08:27:54
【问题描述】：

我想知道如何使用 AngularJS 将文件上传到数据库。我有一个用于创建具有许多字段的新实体的表单（name, description, image, etc）。使用 Angular post 方法从客户端获取数据，之后我使用 DTO 将数据转换为我的对象并插入到数据库。我在请求中获取对象，如下图所示，但我需要获取 byte[] 以将其放入数据库 blob 图像列..

这是我的服务：

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 查看Lot.jsp

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

【问题讨论】：

我知道 Angular ng-model 不适用于输入文件，所以我尝试编写自己的指令但没有成功

标签： java angularjs json hibernate file-upload

【解决方案1】：

您需要将 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

【讨论】：

【解决方案2】：

我通常使用angular-file-upload 来上传文件。

【讨论】：