使用 jQuery、ajax 和 java 存储图像

Question

我正在尝试从动态创建的选项卡更新图像。最初原始图像正确显示；但是，生成的更新图像不会显示，因此我保存的数据不正确。

HTML（动态创建）：

//Column 2 to contain the image
contents += '<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">';
contents += '<label class="control-label control-label-left col-lg-4 col-md-4 col-sm-4 col-xs-4" for="'+obj.eventId+'">Photograph:</label>';
contents += '<input class="form-control-file col-lg-8 col-md-8 col-sm-8 col-xs-8 photo-input" type="file" id="'+obj.eventId+'" name="photo" placeholder="Photograph">';
contents += '<img id="campImage'+obj.eventId+'" src="' + obj.eventPicture + '" alt="Camp image" class="img-thumbnail">';
contents += '</div>';

jQuery/javascript/ajax:

        var img = document.getElementById('campImage'+ this.id);

        $.ajax({
            url: "CampUpdateView",
            data : {
                "campID" : this.id,
                "startDate" : $('#startDate'+ this.id).val(),
                "endDate" : $('#endDate'+ this.id).val(),
                "location" : $('#location'+ this.id).val(),
                "details" : $('#details'+ this.id).val(),
                "nights" : $('#nights'+ this.id).val(),
                "building" : $('#building'+ this.id).val(),
                "canvas" : $('#canvas'+ this.id).val(),
                "actualKM" : $('#actualKM'+ this.id).val(),
                "offset" : $('#offset'+ this.id).val(),
                "outcome" : $('#outcome'+ this.id).val(),
                "photo" : img.getAttribute('src'),
            },
            type: "POST",
            cache: false,

照片数据片段：“data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBD”

这被传递给客户端的java，它调用服务器端来执行更新。在更新 SQL 中，我在准备好的语句中将照片设置为该值。

客户端：

@Override
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    //Get the variables from local storage
    String photo = request.getParameter("photo");

    System.out.println("photo: " + photo);

    //Update Camp
    MySQLConnection.updateEvent(campID, startDate, endDate, location, details, nights, building, canvas,
            outcome, photo, actualKM, offset);

}

服务器端：

public static void updateEvent(String eventID,
        String startDate, String endDate, String location, String details,
        String nightsInCamp, String inBuilding, String underCanvas,
        String kmTravelled, String picture, String kmTravelledActual, 
        String kmTravelledOffset) {

    PreparedStatement ps = null;
    // Create connection/statement variables outside of try block
    Connection c = null;

    String updateWithPhoto = ("UPDATE at_event " +
                              "SET event_date_start = ?, " +
                                "event_date_end = ?, " +
                                "event_location = ?, " +
                                "event_details = ?, " +
                                "event_nights = ?, " +
                                "event_nights_building = ?, " +
                                "event_nights_canvas = ?, " +
                                "event_picture = ?, " +
                                "event_km = ?, " +
                                "event_km_actual = ?, " +
                                "event_km_offset = ? " +
                              "WHERE event_id = ?;");

    try {
        // Get Connection and Statement from DataSource
        c = ds.getConnection();

        try {

            // Create a statement and execute the query on it
            ps = c.prepareStatement(updateWithPhoto);
            ps.setString(1, startDate);
            ps.setString(2, endDate);
            ps.setString(3, location);
            ps.setString(4, details);
            ps.setString(5, nightsInCamp);
            ps.setString(6, inBuilding);
            ps.setString(7, underCanvas);

            ps.setString(8, picture);

            ps.setString(9, kmTravelled);
            ps.setString(10, kmTravelledActual);
            ps.setString(11, kmTravelledOffset);
            ps.setString(12, eventID);

            ps.executeUpdate();

            // Clean up
            ps.close();
            c.close();

        } catch (SQLException se) {
            System.out.println("SQLException in updateEvent: " + se.toString());
        } catch (Exception e) {
            System.out.println("Errors occurred in updateEvent: " + e.toString());
        }

    } catch (SQLException e1) {
        System.out.println("SQLException in updateEvent: " + e1.toString());
        e1.printStackTrace();

    } finally {

        // Ensure connection is closed and returned to the pool, even if errors occur.
        // This is *very* important if using a connection pool, because after all the
        // connections are used, the application will hang on getConnection(), waiting
        // for a connection to become available.
        // Any errors from the following closes are just ignored.  The main thing is
        // that we have definitely closed the connection.
        try {
            if(ps != null) ps.close();
            if(c != null) c.close();
        } 
        catch (Exception e) {
            System.out.println("Exception in updateEvent: " + e.toString());
        }
    }
    // Done
}

Answer 1

答案是去掉开头的描述：

var img1 = document.getElementById('campImage'+ this.id);
img2 = (img1.getAttribute('src')).replace(/^data:image\/(png|jpg|jpeg|gif);base64,/, "");

然后在服务器端：

BASE64Decoder decoder = new BASE64Decoder();
byte[] imageByte = decoder.decodeBuffer(picture);
ps.setBlob(8, new SerialBlob(imageByte));

其中“picture”是字符串（不带“data:image/jpeg;base64”）。