java - 使用 AngularJs 和 Java 在 SQL 中存储图像？

Question

这个问题已经有答案了:

File Upload using AngularJS (29 个回答)

ng-model for `<input type="file"/>` (with directive DEMO) (13 个回答)

已关闭 3 年前。

我正在构建一个用于购买和销售二手音乐装备的网页。我正在尝试实现在发布新项目时添加项目缩略图的功能。我已经做好了一切工作，将商品名称、价格、描述、位置和联系信息发送到我的 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;
    }

Answer 1

我不会将缩略图存储在数据库中。我将存储缩略图所在的位置(实际图像的路径)。我会将图像上传到 S3，或者使用 Samba 或其他方式在服务器上自行管理一个位置。通过这种方式，您可以轻松存储完整图像、缩略图以及数据库中的引用。这样，每次加载数据库条目时，您就不必加载图像和缩略图。 HTML 只显示它们的位置就足够了。然后，在其他一些场景中，您可能会发现想要限制图像访问，因此在这些图像路径上，您可以在检索等之前添加一些安全检查...