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

Question

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

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

下面给出了字节数组组件映射到 View 模型的 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 类 应该是这样的:

public class ImagePath {

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

Controller 类 将具有:

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