Как отобразить MySQL Blob внутри Angular Application?

Question

Я использую BLOB-объект MYSQL для хранения изображения в базе данных. Теперь я хочу показать изображение в своем приложении IONIC, в которое я также загрузил его.

Как это работает и как я могу сохранить его внутри объекта?

Вы можете найти мой код здесь:

Java класс

    public JSONObject getItems(String email) throws SQLException, ClassNotFoundException, IOException {
    JSONObject jsonObject = new JSONObject();
    JSONArray jsonArray = new JSONArray();


    Connection conn = new MYSQLAccess().getConnection();        
    String sql = "SQL String";
    PreparedStatement pstm = conn.prepareStatement(sql);

    pstm.setString(1, email);

    ResultSet rs = pstm.executeQuery();

    while (rs.next()) {
        jsonObject.put("1", rs.getBlob("1"));
        jsonObject.put("2",rs.getInt("2"));
        jsonObject.put("3", rs.getString("3"));
        jsonObject.put("4", rs.getString("4"));

        jsonArray.add(performanceCarsJsonObject);
    }


    jsonObject = new JSONObject();
    jsonObject.put("array", jsonArray);

    conn.close();
    return jsonObject;
}

TypeScript Ionic / Angualar

getPerformanceCars() {
    let params = {"email": this.user.getEmail()};

    this.cars.performanceCars(params).then(data => {
        this._List = data;
        this._List = this._List.value.icons;
        this.itemList = this._List;
    });
}

Ионный HTML

<ion-list>
    <ion-item-sliding *ngFor="let items of itemList">
      <button ion-item (click)="openItem(item)">
        <ion-avatar item-start>
            <img [src]="items.img" />
        </ion-avatar>
        <h2>{{ items.email }}</h2>
        <p>{{ items.values }}</p>
        <ion-note item-end *ngIf="items.note">{{ cars.note }}</ion-note>
      </button>
    </ion-item-sliding>
</ion-list>

Для предварительного просмотра фотографии в IONIC Input Uploader используется следующий HTML-код.

<div class="profile-image" style="background-image: url(&quot;data:image/jpeg;base64,DATA;);"></div>

Надеюсь, вы поможете мне решить мою проблему.

Answer 1

Решение

Я исправил проблемы, создав два новых метода. На первом этапе я создаю метод getItemBlob для извлечения BLOB-объекта вне базы данных. На следующем шаге я создаю метод getItemImage в классе контроллера. Эти методы осуществляют поиск нужного большого двоичного объекта в базе данных по itemID, преобразуя его в InputStream и на последнем шаге внутри ServletOutputStream.

В части HTML я использовал обычный тег img и сопоставил имя хоста сервера, порт и метод getItemImage для отображения изображения.

Класс Java (Службы предметов)

public Blob getItemBlob(String id) throws SQLException{
    Blob image = null;

    Connection conn = new MYSQLAccess().getConnection();
    String sql = "SELECT ITEMDATA FROM OWNITEM WHERE OWNITEMID = ? AND ACTIVE = 1";
    PreparedStatement pstm = conn.prepareStatement(sql);
    pstm.setString(1, id);
    ResultSet rs = pstm.executeQuery();

    while (rs.next()) {
        image = rs.getBlob("ITEMDATA");
    }

    conn.close();
    return image;
}

Класс Java (контроллер элементов)

@ResponseBody
@CrossOrigin(origins = "http://localhost:8100")
@RequestMapping(value = "/getItemImage")
public void getItemImage(@RequestParam("id") String id, HttpServletResponse response) throws IOException, SQLException {
    ServletOutputStream out = response.getOutputStream();
    ItemServices myItemServices = new ItemServices();
    Blob image = myItemServices.getItemBlob(id);

    response.setContentType("image/jpg");
    InputStream in = image.getBinaryStream();
    int length = (int)image.length();
    int bufferSize = 1920;
    byte[] buffer = new byte[bufferSize];

    while ((length = in.read(buffer)) != -1) {
        out.write(buffer, 0, length);
    }

    in.close();
    out.flush();
}

Java-класс (Абонентский контроллер)

@SuppressWarnings("unchecked")
public JSONObject getSubscribersItems(String email) throws SQLException, ClassNotFoundException {
    JSONObject subscribersItemsJsonObject = new JSONObject();
    JSONArray subscribersItemsJsonArray = new JSONArray();
    ArrayList<String> subscribersArrayList = this.getSubscriber(email);

    Connection conn = new MYSQLAccess().getConnection();        
    String sql = "SELECT T1.OWNITEMID,T1.ITEMNAME,T2.USERNAME,T2.COUNTRY FROM OWNITEM T1,CUSTOMER T2 WHERE T1.EMAIL = T2.EMAIL AND T1.EMAIL = ? AND T1.ITEMDATA != 'NULL' AND T2.ACTIVE = 1";
    PreparedStatement pstm = conn.prepareStatement(sql);

    for (int i = 0; i < subscribersArrayList.size(); i++) {
        pstm.setString(1, subscribersArrayList.get(i));

        ResultSet rs = pstm.executeQuery();

        while (rs.next()) {
            subscribersItemsJsonObject = new JSONObject();

            subscribersItemsJsonObject.put("itemID", rs.getInt("OWNITEMID"));
            subscribersItemsJsonObject.put("itemName", rs.getString("ITEMNAME"));
            subscribersItemsJsonObject.put("username", rs.getString("USERNAME"));
            subscribersItemsJsonObject.put("country", rs.getString("COUNTRY"));

            subscribersItemsJsonArray.add(subscribersItemsJsonObject);
        }
    }

    subscribersItemsJsonObject = new JSONObject();
    subscribersItemsJsonObject.put("items", subscribersItemsJsonArray);

    conn.close();
    return subscribersItemsJsonObject;
}

ИОННЫЙ HTML

<ion-list>
    <ion-item-sliding *ngFor="let items of subscriberItemsItemList">
      <button ion-item (click)="openItems(items)">
        <ion-avatar item-start>
            <img src="{{ itemImageUrl }}/getItemImage?id={{ cars.itemID }}" />
        </ion-avatar>
        <h2>{{ items.username }}</h2>
        <p>{{ items.country }}</p>
        <ion-note item-end *ngIf="items.note">{{ items.note }}</ion-note>
      </button>
    </ion-item-sliding>
</ion-list>

IONIC TypeScript / Angular

getDesignCars() {
    let params = {"email": this.user.getEmail()};

    this.cars.homeCars(params).then(data => {
        this._subscriberCarsList = data;
        this._subscriberCarsList = this._subscriberCarsList.value.cars;
        this.subscriberCarsItemList = this._subscriberCarsList;
    });
}