Question

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

Answer 1

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

Answer 2

您需要使用FormData（），如下所示：

image

其中reader.readAsDataURL来自您的phpmyadmin

看看here

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

2 个答案: