我使用 MYSQL Blob 在数据库中存储图像。现在我想在我上传的 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/Angular
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;
});
}
ionic 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 输入 uploader 中的照片预览使用以下 HTML 代码。
<div class="profile-image" style="background-image: url("data:image/jpeg;base64,DATA;);"></div>
我希望你能帮助我,解决我的问题。
最佳答案
解决方案
我通过创建两种新方法解决了这些问题。在第一步中,我创建 getItemBlob 方法以从数据库外部提取 Blob。在下一步中,我在 Controller 类中创建 getItemImage 方法。这些方法通过 itemID 在数据库中搜索正确的 Blob,将 Blob 转换为 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 类(项目 Controller )
@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 类(订阅者 Controller )
@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;
}
IONIC 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;
});
}
关于java - 如何在 Angular 应用程序中显示 MySQL Blob?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53307572/