使用 AngularJs 和 Java 在 SQL 中存储图像？ [复制]

Posted 2023-03-22

【中文标题】使用 AngularJs 和 Java 在 SQL 中存储图像？ [复制]

【英文标题】：Store Image in SQL Using AngularJs and Java? [duplicate]

【发布时间】：2020-04-20 18:37:27

【问题描述】：

我正在构建一个用于买卖二手音乐设备的网页。我正在尝试实现在发布新项目时为项目添加缩略图的功能。我已经完成了将项目名称、价格、描述、位置和联系信息发送到我的 SQL 数据库并通过在我的 AngularJs 中将其转换为 JSON 然后将其发送到 Java/JDBC 来存储信息的一切工作。我还可以检索数据并将其显示在“当前帖子”页面上。但是，我不确定如何将带有我的 JSON 的图像发送到我的后端以存储在我的数据库中。我尝试将 BLOB 添加到我的 Java 构造函数中，但似乎总是返回 NULL。这是我的一些代码。

我的 html

    <form name="insertItem">
    <div class="container">
        <div class="card">

            <div class="card-header">
                <h4>Create New Posting</h4>
                <button type="button" ng-click="createItem()"
                    class="btn btn-success">Create Posting</button>
                <p>
                    <span class="text-warning" ng-bind="createStatus"></span>
                </p>
            </div>

            <div class="card-body">
                <table class="table table-responive small-table">
                    <tr>
                        <td><label for="itemName">Item Name:</label><br> <input
                            id="name" type="text" class="form-control"
                            ng-model="newItem.itemName"></td>
                    </tr>
                    <tr>
                        <td><label for="itemCat">Category:</label><br> <select
                            id="cat" class="form-control"
                            ng-options="value for value in itemCat"
                            ng-model="newItem.itemCat">
                        </select></td>
                    </tr>
                    <tr>
                        <td><label for="price">Price $:</label><br> <input
                            type="number" class="form-control" name="price"
                            ng-model="newItem.itemPrice"></td>
                    </tr>
                    <tr>
                        <td><label for="itemDesc">Description:</label><br> <textarea
                                rows="5" id="desc" class="form-control"
                                ng-model="newItem.itemDesc"></textarea></td>
                    </tr>
                    <tr>
                        <td><label for="location">Location:</label><br> <input
                            type="text" class="form-control" id="loc"
                            ng-model="newItem.location"></td>
                    </tr>
                    <tr>
                        <td><label for="contact">Contact Info:</label><br> <input
                            type="text" class="form-control" id="cont"
                            ng-model="newItem.contact"></td>
                    </tr>

                    <tr>
                        <td><label for="thumbnail">Upload a Thumbnail Image:
                        </label><br> <input type="file" class="form-control-file border"
                            name="thumbnail" ng-model="newItem.thumbnail"></td>
                    </tr>
                </table>

                <ul>
                    <li ng-repeat="file in files">file.name</li>
                </ul>
            </div>
        </div>
    </div>
</form>

我的 AngularJs 发布方法

musicapp.controller('itemAddController', function($scope, $http )          
    $scope.itemCat = ['Guitar', "Bass", "Drums", "Piano", "Keyboard", "Synth", 
        "Microphone", "Classical", "Wind", "Recording", "Software", "Amp/Speaker", "Misc"]

    $scope.createItem = function() 
        $scope.jsonObject = angular.toJson($scope.newItem, false);
        console.log('new item: ' + $scope.jsonObject);              
        $http.post("/MusicApp/API/item", $scope.jsonObject)
        .then(
            function success(response)                     
                console.log('status: ' + response.status);
                $scope.createStatus = 'Item Posted.';
                $scope.successfulInsert = true;
            ,
            function error(response) 
                console.log('error, return status: ' + response.status);
                $scope.createStatus = 'insert error, ' + response.data.message;
            
        );          
    ;
)

我的泽西邮报

    @POST
    @Produces(MediaType.APPLICATION_JSON) 
    public List<item> insert(item newItem)  
        return service.insert(newItem);     
    

我的 JDBC 代码

private final static String addItems = "INSERT INTO item "
            + "(itemName, itemCat, itemPrice, itemDesc, contact, location, thumbnail) VALUES "
            + "(?, ?, ?, ?, ?, ?, ?);";

public List<item> insert(item newItem) 
        List<item> items = new ArrayList<item>();
        PreparedStatement prepStatement = null;
        Connection conn = MariaDbUtil.getConnection();

        try 
            prepStatement = conn.prepareStatement(addItems);
            prepStatement.setString(1, newItem.getItemName());
            prepStatement.setString(2, newItem.getItemCat());
            prepStatement.setInt(3, newItem.getItemPrice());
            prepStatement.setString(4, newItem.getItemDesc());
            prepStatement.setString(5, newItem.getContact());
            prepStatement.setString(6, newItem.getLocation());

            prepStatement.setBlob(7, newItem.getThumbnail()); //Blob



            prepStatement.executeUpdate();
            System.out.println("Row Added " + newItem.getItemName());

            newItem.setItemId(getLastKey(conn));
         catch (SQLException e) 
            e.printStackTrace();
         finally 
            try 
                if (conn != null) 
                    conn.close();
                    prepStatement.close();
                    conn.close();
                
             catch (SQLException e) 
                e.printStackTrace();
            
        
        items.add(newItem);
        return items;
    

【问题讨论】：

核心ng-model 指令不适用于开箱即用的<input type="file">。见Working Demo of Directive that Works with ng-model。

【参考方案1】：

我不会将缩略图存储在数据库中。我会存储缩略图所在的位置（实际图像的路径）。我会将图像上传到 S3 或在服务器上由您自己管理一个位置，可能使用 Samba 或其他东西。通过这种方式，您可以轻松地从数据库中存储完整图像、缩略图和参考。然后每次加载数据库条目时，您都不必加载图像和缩略图。仅它们的位置就足以让 HTML 显示它们。然后，在其他一些情况下，您可能会发现您想要限制图像访问，因此在这些图像路径上您可以在检索之前添加一些安全检查等...

【讨论】：

图片的路径是字符串吗？

确实如此。如果您要使用 AWS S3 进行存储，您将拥有类似：bucket_name.s3.amazonaws.com/object_path