使用 spring 引导和 angular 9 问题检索映像

Question

i have problem with getting image from spring boot (webapp/images) to angular 9 using api rest and spring security jwt. 当我保存我的图像时它可以工作......我在文件夹 webapp/images 中找到它但是当我尝试获取图像时我无法显示它这是我的代码。

保存图像：

 //region Save UserProfile
@PostMapping
public ResponseEntity<?> createUserProfile(@RequestParam("file") MultipartFile file,  @Valid @RequestParam("userProfile") String userProfile)throws Exception{

    boolean isExit = new File(context.getRealPath("/Images/")).exists();
    if (!isExit)
    {
        new File (context.getRealPath("/Images/")).mkdir();
        System.out.println("---Folder Was Created---");
    }
    String filename = file.getOriginalFilename();
    String newFileName = FilenameUtils.getBaseName(filename)+"."+FilenameUtils.getExtension(filename);
    File serverFile = new File (context.getRealPath("/Images/"+File.separator+newFileName));
    try
    {
        System.out.println("Image");
        FileUtils.writeByteArrayToFile(serverFile,file.getBytes());

    }catch(Exception e) {
        e.printStackTrace();
    }

    UserProfile userProfileMapper = new ObjectMapper().readValue(userProfile, UserProfile.class);

    userProfileMapper.setUrlImage(newFileName);
    UserProfile newUserProfile=iCommonService.save(userProfileMapper);
    return new ResponseEntity<>("UserProfile was saved",HttpStatus.CREATED);
}
//endregion

Spring 启动 controller：

//USERPROFILE_IMAGE_BY_USER_UID= "/imageuserprofile/{userprofileuid}"
@GetMapping(path = APIName.USERPROFILE_IMAGE_BY_USER_UID)
public byte[] getPhoto(@PathVariable("userprofileuid") String userprofileuid) throws Exception{
    UserProfile userProfile   = iCommonService.findByUid(userprofileuid);

    if(userProfile == null){
        throw new CommonServiceException("User profile uid not found");
    }
    return Files.readAllBytes(Paths.get(context.getRealPath("/Images/")+userProfile.getUrlImage()));
}

Angular 服务

  private baseUrl = 'http://localhost:8080/userprofile';
  public host :string = "http://localhost:8080";
  
  getUserProfileImage(uid: string): Observable<any> {
    return this.http.get(`${this.baseUrl}/imageuserprofile/${uid}`);
  }

我的组件

constructor(
public userProfileService: UserProfileService,
) {}


getImageUserProfile() {
this.userProfileService
  .getUserProfileImage(this.userProfileUid)
  .subscribe((image) => {
    this.imageUserProfile =image;
  });
}

在我尝试的模板中：

<img
      class="profile-user-img img-responsive img-circle"
       [src]= "'data:image/png;base64,'+imageUserProfile"
      alt="User profile picture"
    />

这给了我（数据：图像/png；base64，未定义：1 获取数据：图像/png；base64，未定义的网络：：ERR_INVALID_URL）

或者

<img
      class="profile-user-img img-responsive img-circle"
       [src]= "imageUserProfile"
      alt="User profile picture"
    />

这给了我（“在 position 0 处的 JSON 中出现意外的令牌”）

我也尝试

<img
      class="profile-user-img img-responsive img-circle"
       src= "{{this.userProfileService.host+'/userprofile/imageuserprofile/'+userProfileUid}}"
      alt="User profile picture"
    />

这给了我（GET http://localhost:8080/userprofile/imageuserprofile/2SGI2U8WXUVSfMdgZqhQrok66wLaU03y 403）

有人可以告诉我我做错了什么或什么。

提前感谢。

Answer 1

这里有两点需要纠正：

您可能会收到 403 错误，因为您没有传递 http.get() 请求的标头中所需的 jwt 身份验证令牌。 只有当您共享与 spring 引导安全配置以实现 jwt 安全性相关的代码时，我才能肯定地说出来。

您的 http.get() 应该看起来像这样。

private baseUrl = 'http://localhost:8080/userprofile';
  public host :string = "http://localhost:8080";
  
  getUserProfileImage(uid: string): Observable<any> {
    headers:HttpHeaders=new HttpHeaders().set(<jwt header name>,<token value>)
    return this.http.get(`${this.baseUrl}/imageuserprofile/${uid}`,{headers:headers});
  }

进入关于如何正确处理和显示您从 angular http.get() 收到的图像的第二部分，这个堆栈答案将帮助您获取数据：图像/png；Z95A1446A1446A0F5F721E4AF5C0C8878ABBEER6_{ID7120E4AF5C0C8878ABBE7，