如何使用hibernate、spring mvc和angular js从后端检索图像和其他数据并显示在屏幕上？

Question

我在我的应用程序中使用 hibernate、html、spring mvc 和 angular js。从休眠中，我正在构建将与前端 html 页面绑定的视图模型。对于上传和保存，我没有任何问题。但是，当使用休眠从数据库中检索相同的图像时，我只接收到一个字节数组。如何获取“tab.namePRAttch”中的文件组件（参见下面的代码）。

如何从字节 [] 中获取与我上传的文件相同的文件？

下面给出了字节数组组件映射到视图模型的java代码。我使用 byte[] 作为图像数据类型。

感谢您的帮助。

提前致谢。

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);

$scope.retrieveName = function() {
    if (SearchService.getAdvflagNm()) {
      $http({
          params: {
            "mainId": $scope.mainPR.mainInfoId
          },
          method: 'GET',
          url: 'namePage/retrieveNamePge'
        })
        .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>

Answer 1

要访问图像，您必须将其转换为 b64 格式并为此创建一个实体并将变量 imagePath 声明为 String 类型。让实体名称为 ImagePath 假设您从 dao 层获取列表，例如 list = dao.getList。应用 for 循环访问图像并将其转换为 base64Binary，例如：
String b64 = javax.xml.bind.DatatypeConverter.printBase64Binary(m.getImage());
在 for 循环中实例化您的 ImagePath 实体并将 imagePath 设置为 imagePath.setPath(b64); 以及您希望与图像一起发送的所有其他属性。
现在将其添加到您的列表 attbyArr.add(a); 并将其添加到您的 viewModel viewModel.setNamePRAttch(attbyArr);

让ImageClass为：

@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 Class应该是这样的：

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