バックエンドから他のデータとともに画像を取得し、hibernate、spring mvc、およびangular jsを使用して画面に表示する方法は？

Question

私のアプリケーションでは、hibernate、html、spring mvc、およびangular jsを使用しています。 hibernateから、フロントエンドのhtmlページとバインドするビューモデルを構築しています。アップロードと保存のために私は問題はありません。しかし、hibernateを使ってDBから同じイメージを取得すると、私はバイト配列しか受け取っていません。 "tab.namePRAttch"内のファイルコンポーネントを取得する方法（下記のコードを参照）。

ファイルをbyte []から取得する方法は、アップロードしたものと同じですか？

バイト配列コンポーネントがビューモデルにマップされるJavaコードを以下に示します。私は画像データ型としてbyte []を使用しました。

あなたのお手伝いがありがとうございます。 ありがとうございます。

Answer 1

$scope.retrievName = function() { 
 
    if (SearchService.getAdvflagNm()) { 
 
     $http({ 
 
      params: { 
 
      "mainId": $scope.mainPR.mainInfoId 
 
      }, 
 
      method: 'GET', 
 
      url: 'namePage/retrveNamePge' 
 
     }) 
 
     .then(
 
      function mySuccess(response) { 
 
      $scope.showSuggestions = false; 
 
      $scope.disOthrSec = false; 
 
      if (response.data !== "" && response.data !== undefined) { 
 
       $scope.namePageTabs = response.data; 
 
      } 
 
      SearchService.setAdvflagNm(); 
 
      if (response.status == 500) { 
 

 
      }, 
 
      function myError(response) {}); 
 

 
     } 
 
    };

<div class="col-md-3"> 
 
    <input type="file" ng-image-model file-model="tab.namePRFile" multiple /> 
 
</div> 
 

 

 
<div ng-repeat="file in tab.namePRAttch.file track by $index"> 
 
    <a ng-src="{{file}}" ng-click="openImage(this)">{{file.name}}</a><i ng-click="removePRNameFile(file)" class="btn btn-md fa fa-trash" aria-hidden="true"></i> 
 
</div>

Set<NamePageAttchModel> atchList = result.get(i).getNameAttachments(); 
     List<byte []> attbyArr = new ArrayList<byte[]>(); 
     for(NamePageAttchModel m : atchList){ 
      byte [] a = m.getAttachFile(); 
      attbyArr.add(a); 
     } 
     viewModel.setNamePRAttch(attbyArr); 

を使用すると、B64のフォーマットに変換する必要がある画像にアクセスし、そのためのエンティティを作成し、 String型として変数IMAGEPATHを宣言します。あなたが list = dao.getListのようなダオ層からリストを取得していると仮定して、エンティティ名を ImagePathとしましょう。あなたの ImagePathエンティティをインスタンス化し、あなたのイメージを送りたい他のすべての属性と一緒に imagePath.setPath(b64);としてIMAGEPATHを設定し、forループ
インサイド String b64 = javax.xml.bind.DatatypeConverter.printBase64Binary(m.getImage());
：画像にアクセスし、同じようbase64Binaryのに変換するforループを適用します。
今 IMAGECLASSが可能してみましょうあなたは attbyArr.add(a);をリストに追加し、あなたのViewModel viewModel.setNamePRAttch(attbyArr);

に追加します。

@Entity 
public class ImageClass implements Serializable { 

private static final long serialVersionUID = -4978144559787934722L; 

@Id 
@GeneratedValue(strategy=GenerationType.AUTO) 
@Column(name="image_id") 
private int image_id; 

@Lob 
@Column(name="image_content", nullable=false, columnDefinition="mediumblob") 
private byte[] image; 
} 

が続いのImagePathクラスがあるべきよう：

public class ImagePath { 

private int id; 
private String imagePath; 
} //generate getter setter and parametriced constructor 

コントローラクラスには、

List<ImageClass> list = dao.getList(); 
List<ImagePath> imageList = new ArrayList<ImagePath>(); 
for (ImageClass m : list) { 
     String b64 = javax.xml.bind.DatatypeConverter.printBase64Binary(m.getImage()); 
     ImagePath imagepath = new ImagePath(); 
     imagepath.setId(m.getImage_id()); 
     imagepath.setImagePath(b64); 
     imageList .add(imagepath); 
     model.addAttribute("imageList", imageList); //Or you can return it as a list that can be used in Angular