照片因数据库中尚存在而无法上传，如何覆盖？

huangapple
go评论128阅读模式
英文:

Photo doesn't upload because yet in db, how to overwrite?

问题

以下是您提供的代码翻译部分：

  1. 我是Java的新手，但我正在编写的Web应用的后端是用Java编写的，我的团队中没有人可以帮助我。
  3. 我的问题：在用户个人资料组件中，我有一个输入来编辑照片，但每次都返回错误消息。
  5. 似乎是因为文件已经存在于数据库中，所以照片从未更新。
  7. 我认为在后端可能有一些问题或缺失。
  9. 前端（angular）
  10. -------------
  12. **expert-profile.component.html**
  14. ```lang-js
  15. <!-- [...] -->
  16. <!-----------------------------------------
  17.     图片配置文件
  18.   -------------------------------------------->
  19.   <div
  20.     class="profileImg"
  21.     [ngStyle]="{ 'background-image': 'url(' + photoUrl + ')' }"
  22.     *ngIf="this.userInfos"
  23.   >
  24.    <!-- 上传或更改个人资料照片 -->
  25.     <input
  26.       type="file"
  27.       accept="image/*"
  28.       style="display: none;"
  29.       #file
  30.       (change)="changeProfilePhoto($event.target.files)"
  31.     />
  32.     <mat-icon
  33.       class="editIcon"
  34.       *ngIf="ownProfile"
  35.       (click)="file.click()"
  36.       matTooltip="仅支持.png或.jpg/.jpeg格式的图片，最小大小：KB，最大大小：KB"
  37.     >
  38.       编辑
  39.     </mat-icon>
  40.   </div>
  41. <!-- [...] -->

expert-profile.component.ts

  2. // 导入...
  4. @Component({
  5.   selector: 'app-expert-profile',
  6.   templateUrl: './expert-profile.component.html',
  7.   styleUrls: ['./expert-profile.component.less'],
  8. })
  10. export class ExpertProfileComponent implements OnInit {
  12. //[...]
  14. async changeProfilePhoto(file: FileList) {
  15.     console.log(' async changeProfilePhoto....', file);
  16.     console.log('---------------------请求------------------------------');
  17.     this.fileService
  18.       .uploadProfilePhoto(file[0], this.profileId)
  19.       .subscribe((res) => {
  20.         console.log('changeProfilePhoto (res)', res); // 测试 res= null
  21.         if (res == null) {
  22.           this.snackbar.open('错误（待处理）：文件已上传', '', {
  23.             duration: 2500,
  24.           });
  25.         } else {
  26.           console.log('加载成功');
  27.           location.reload();
  28.         }
  29.       });
  30.     console.log('------------------------ 结束 ---------------------------');
  31.   }
  32. }

console.log 返回--- >

  1. [...]
  2. ------------------------ 结束 ---------------------------
  3. changeProfilePhoto (res) null

浏览器返回 --- >
一个带有消息的 snackbar：

错误（待处理）：文件已上传

照片已上传但未使用。

后端

FileUploadController.java

  1. /* uploadprofilephoto #1 */
  2.     @PostMapping("/user/{userId}/avatar")
  3.     public ResponseEntity<UserInfo> uploadProfilePhoto(@PathVariable UUID userId, @RequestParam MultipartFile avatar,
  4.                                                   HttpServletRequest request) throws IOException {
  5.         System.out.println("............................................................................");
  6.         System.out.println("                       uploadprofilephoto #1    ");
  7.         System.out.println("............................................................................");                                          
  8.         try {
  9.             System.out.println("............................     尝试     ......................................");
  10.            
  11.             UserInfo u = storageService.addUserAvatar(userId, avatar.getOriginalFilename(), avatar.getInputStream());
  12.             URI location = ServletUriComponentsBuilder.fromCurrentRequest().path("/{userId}").buildAndExpand("").toUri();
  13.             return ResponseEntity.created(location).body(u);
  14.         } catch(Exception e) {
  15.             System.out.println(".......................................   捕获：（以下为 e）   .....................................");
  16.             System.out.println(e);
  17.             System.out.println("............................................................................");
  18.             return ResponseEntity.ok().body(null);
  19.         }
  20.         
  21.     }

FileStorageService.java 中的 addUserAvatar()

  1.   /* #uploadprofilephoto #2*/
  2.     public UserInfo addUserAvatar(UUID userId, String filename, InputStream fileContent) {
  3.         System.out.println("---------------------------------------------------- ");
  4.         System.out.println("                        #2 - 更改我的个人资料图片：  "+filename);
  5.         System.out.println("---------------------------------------------------- ");
  6.         UserEntity user = userServiceActions.findById(userId);
  8.         //如果userProfile中的fileId已经存在于filedatabase中，则在filedatabase + 目录中将其删除
  9.         //#3
  10.         try {
  11.             this.delete(user.getImage());
  12.         } catch(Exception e) {}
  14.         //为新头像创建路径+目录以存储它
  15.         Path directory = router.getOrCreatePathFromFilename(userId, filename, "avatar");
  16.         Path location = fileSaver.store(filename, fileContent, directory);
  18.         //为新文件请求
  19.         var f = new FileRequest();
  20.         f.filename = filename;
  21.         f.projectId = Optional.of(userId);
  22.         MediaType mediaType = MediaType.parseMediaType(getContentType(location));
  23.        
  24.         //使用唯一Id为此文件创建实体，并将其添加到文件数据库中
  25.         //#4 + #5
  26.         FileEntity fileEntity = fileServiceActions.add(UUID.randomUUID(), mediaType.getType(), mediaType.getSubtype(), f , "avatar");
  27.         
  28.         //使用新的Id更新user数据库中的imageId
  29.         //#6
  30.         user.setImage(fileEntity.getId());
  31.         System.out.println("---------------------------------------------------- ");
  32.         System.out.println("                        #6 - 在用户数据库中保存新的imageId：  "+user.getImage());
  33.         System.out.println("---------------------------------------------------- ");
  34.         userRepository.save(user);//如果以前已经上传过带有相同文件名的照片，似乎会阻塞
  35.        
  36.         //返回新数据并更新个人资料
  37.         UserInfo userInfo = mapper.map(user, UserInfo.class);
  38.         return userInfo;
  39.     }

FileStorageService.java 中的 delete()（一切似乎都正常）

  1.  /* #uploadprofilephoto #3*/
  2.     public void delete(UUID id) throws ResourceNotFoundException {
  3.         System.out.println("---------------------------------------------------- ");
  4.         System.out.println("                        #3 - 删除：  "+id);
  5.         System.out.println("---------------------------------------------------- ");
  6.     	FileEntity file = fileServiceActions.findById(id);
  7.     	 Path directory = router.getOrCreatePathFromFilename(file.getProjectId(), file.getFilename(), file.getCategory());
  8.     	
  9.     	fileSaver.deleteFromDisk(directory, file.getFilename());
  10.     	
  11.         fileServiceActions.delete(id);
  12.         System.out.println("end delete ---------------------------------------------------- ");
  13.     }

FileServiceActions.java 中的 add() 和 save()（问题可能出在 save）

  1.   /**
  2.      * #uploadprofilephoto #4
  3.      * 允许为文件提供预生成的UUID。当我们想在将记录添加到数据库之前获得UUID时很有用。
  4.      */
  5.     public FileEntity add(UUID fileId, String type, String subtype, FileRequest req , String category) {
  6.         FileEntity fileEntity;
  7.         
  8.         try {
  9.             ProjectEntity proj = null;
  10.             proj = projectServiceActions.findById(req.projectId.orElseThrow());
  11.             fileEntity = toEntity(proj.getId(), req, type, subtype,
  13. <details>
  14. <summary>英文:</summary>
  16. I am new to Java, but the back of the web app I am coding is in Java and no one in my team can help me. 
  18. My problem: In the user profile component, I have an input to edit the photo but every time it returns an error message.
  20. It seems it&#39;s because file already exists in the database, so the photo is never updated.
  22. I think there is something wrong or missing **in the back side** .
  24. FRONT (angular)
  25. -------------
  27. **expert-profile.component.html**
  29. ```lang-js
  30. &lt;!-- [...] --&gt;
  31. &lt;!-----------------------------------------
  32.     img profile
  33.   --------------------------------------------&gt;
  34.   &lt;div
  35.     class=&quot;profileImg&quot;
  36.     [ngStyle]=&quot;{ &#39;background-image&#39;: &#39;url(&#39; + photoUrl + &#39;)&#39; }&quot;
  37.     *ngIf=&quot;this.userInfos&quot;
  38.   &gt;
  39.    &lt;!-- upload or change profile photo --&gt;
  40.     &lt;input
  41.       type=&quot;file&quot;
  42.       accept=&quot;image/*&quot;
  43.       style=&quot;display: none;&quot;
  44.       #file
  45.       (change)=&quot;changeProfilePhoto($event.target.files)&quot;
  46.     /&gt;
  48.     &lt;mat-icon
  49.       class=&quot;editIcon&quot;
  50.       *ngIf=&quot;ownProfile&quot;
  51.       (click)=&quot;file.click()&quot;
  52.       matTooltip=&quot;Only .png or .jpg/.jpeg img with min-size: Ko and max-size: Ko&quot;
  53.     &gt;
  54.       edit
  55.     &lt;/mat-icon&gt;
  56.   &lt;/div&gt;
  57. &lt;!-- [...] --&gt;

expert-profile.component.ts

  2. // imports...
  4. @Component({
  5.   selector: &#39;app-expert-profile&#39;,
  6.   templateUrl: &#39;./expert-profile.component.html&#39;,
  7.   styleUrls: [&#39;./expert-profile.component.less&#39;],
  8. })
  10. export class ExpertProfileComponent implements OnInit {
  12. //[...]
  14. async changeProfilePhoto(file: FileList) {
  15.     console.log(&#39; async changeProfilePhoto....&#39;, file);
  16.     console.log(&#39;---------------------REQUEST------------------------------&#39;);
  17.     this.fileService
  18.       .uploadProfilePhoto(file[0], this.profileId)
  19.       .subscribe((res) =&gt; {
  20.         console.log(&#39;changeProfilePhoto (res)&#39;, res); // test res= null
  21.         if (res == null) {
  22.           this.snackbar.open(&#39;Error (to handle) : File already uploaded&#39;, &#39;&#39;, {
  23.             duration: 2500,
  24.           });
  25.         } else {
  26.           console.log(&#39;loading ok&#39;);
  27.           location.reload();
  28.         }
  29.       });
  30.     console.log(&#39;------------------------ END ---------------------------&#39;);
  31.   }
  32. }

console.log return--->

  1. [...]
  2. ------------------------ END ---------------------------
  3. changeProfilePhoto (res) null

browser return --->
a snackbar with message:
>Error (to handle) : File already uploaded

Photo is uploaded but not used.

Back End

FileUploadController.java

  1. /* uploadprofilephoto #1 */
  2.     @PostMapping(&quot;/user/{userId}/avatar&quot;)
  3.     public ResponseEntity&lt;UserInfo&gt; uploadProfilePhoto(@PathVariable UUID userId, @RequestParam MultipartFile avatar,
  4.                                                   HttpServletRequest request) throws IOException {
  5.         System.out.println(&quot;............................................................................&quot;);
  6.         System.out.println(&quot;                       uploadprofilephoto #1    &quot;);
  7.             System.out.println(&quot;............................................................................&quot;);                                          
  8.         try {
  9.             System.out.println(&quot;............................     TRY     ......................................&quot;);
  10.            
  11.             UserInfo u = storageService.addUserAvatar(userId, avatar.getOriginalFilename(), avatar.getInputStream());
  12.             URI location = ServletUriComponentsBuilder.fromCurrentRequest().path(&quot;/{userId}&quot;).buildAndExpand(&quot;&quot;).toUri();
  13.             return ResponseEntity.created(location).body(u);
  14.         } catch(Exception e) {
  15.             System.out.println(&quot;.......................................   CATCH: (e below)   .....................................&quot;);
  16.             System.out.println(e);
  17.             System.out.println(&quot;............................................................................&quot;);
  18.             return ResponseEntity.ok().body(null);
  19.         }
  20.         
  21.     }

addUserAvatar() in FileStorageService.java

  1.   /* #uploadprofilephoto #2*/
  2.     public UserInfo addUserAvatar(UUID userId, String filename, InputStream fileContent) {
  3.         System.out.println(&quot;---------------------------------------------------- &quot;);
  4.         System.out.println(&quot;                        #2 - change my profile img by    &quot;+filename);
  5.         System.out.println(&quot;---------------------------------------------------- &quot;);
  6.         UserEntity user = userServiceActions.findById(userId);
  8.         //If fileId in userProfile is already present in filedatabase , it delete it in filedatabase + directory
  9.         //#3
  10.         try {
  11.             this.delete(user.getImage());
  12.         } catch(Exception e) {}
  14.         //create path for a new avatar + directory to store it
  15.         Path directory = router.getOrCreatePathFromFilename(userId, filename, &quot;avatar&quot;);
  16.         Path location = fileSaver.store(filename, fileContent, directory);
  18.         //request for a new file
  19.         var f = new FileRequest();
  20.         f.filename = filename;
  21.         f.projectId = Optional.of(userId);
  22.         MediaType mediaType = MediaType.parseMediaType(getContentType(location));
  23.        
  24.         //Create an entity for this file with a uniq Id, and add it in file db
  25.         //#4 + #5
  26.         FileEntity fileEntity = fileServiceActions.add(UUID.randomUUID(), mediaType.getType(), mediaType.getSubtype(), f , &quot;avatar&quot;);
  27.         
  28.         //update the imageId in user db with the new one
  29.         //#6
  30.         user.setImage(fileEntity.getId());
  31.         System.out.println(&quot;---------------------------------------------------- &quot;);
  32.         System.out.println(&quot;                        #6 - CrudRepository save in user the new imageId:   &quot;+user.getImage());
  33.         System.out.println(&quot;---------------------------------------------------- &quot;);
  34.         userRepository.save(user);//seems to block if a photo was allready uploaded by past with the same filename
  35.        
  36.         //return the new data and update profile
  37.         UserInfo userInfo = mapper.map(user, UserInfo.class);
  38.         return userInfo;
  39.     }

(see return of console print below)

delete() in FileStorageService.java (everything seems ok)

  1.  /* #uploadprofilephoto #3*/
  2.     public void delete(UUID id) throws ResourceNotFoundException {
  3.         System.out.println(&quot;---------------------------------------------------- &quot;);
  4.         System.out.println(&quot;                        #3 - delete    &quot;+id);
  5.         System.out.println(&quot;---------------------------------------------------- &quot;);
  6.     	FileEntity file = fileServiceActions.findById(id);
  7.     	 Path directory = router.getOrCreatePathFromFilename(file.getProjectId(), file.getFilename(), file.getCategory());
  8.     	
  9.     	fileSaver.deleteFromDisk(directory, file.getFilename());
  10.     	
  11.         fileServiceActions.delete(id);
  12.         System.out.println(&quot;end delete ---------------------------------------------------- &quot;);
  13.     }

add() & save() in FileServiceActions.java (Pb comes from the save according to me )

  1.   /**
  2.      * #uploadprofilephoto #4
  3.      * Allows to give a pre-generated UUID to the file. Useful when we want to have the
  4.      * UUID before adding a record to the database.
  5.      */
  6.     public FileEntity add(UUID fileId, String type, String subtype, FileRequest req , String category) {
  7.         FileEntity fileEntity;
  8.         
  9.         try {
  10.             ProjectEntity proj = null;
  11.             proj = projectServiceActions.findById(req.projectId.orElseThrow());
  12.             fileEntity = toEntity(proj.getId(), req, type, subtype, category);
  13.         } catch(Exception e) {
  14.             UserEntity user = null;
  15.             user = userServiceActions.findById(req.projectId.orElseThrow());
  16.             fileEntity = toEntity(user.getId(), req, type, subtype, category);
  17.         }
  18.         fileEntity.setId(fileId);
  19.         System.out.println(&quot;----------------------------------------------------&quot;);
  20.         System.out.println(&quot;                        #4 add this new file in file db    &quot;);
  21.         System.out.println(fileEntity);
  22.         System.out.println(&quot;----------------------------------------------------&quot;);
  23.         return save(fileEntity).orElseThrow();
  24.     }
  26. [...]
  28. /**
  29.      * #uploadprofilephoto #5
  30.      * If any error happens, Optional.empty() is returned.
  31.      */
  32.     private Optional&lt;FileEntity&gt; save(FileEntity file) {
  33.         System.out.println(&quot;---------------------------------------------------- &quot;);
  34.         System.out.println(&quot;                        #5 - Save   &quot;);
  35.         System.out.println(&quot;---------------------------------------------------- &quot;);
  36.         FileEntity savedUser = fileRepository.save(file);
  37.         System.out.println(&quot;----&gt;#5 : savedUser: &quot;+savedUser);//pb is during the save, this consolePrint never be return when img allready exist in db
  38.         return Optional.ofNullable(savedUser);
  39.     }

save() in CrudRepository.class ('Pb' comes from this save according to me )

  2. @NoRepositoryBean
  3. public interface CrudRepository&lt;T, ID&gt; extends Repository&lt;T, ID&gt; {
  5. 	/**
  6. 	 * Saves a given entity. Use the returned instance for further operations as the save operation might have changed the
  7. 	 * entity instance completely.
  8. 	 *
  9. 	 * @param entity must not be {@literal null}.
  10. 	 * @return the saved entity will never be {@literal null}.
  11. 	 */
  12. 	&lt;S extends T&gt; S save(S entity);
  14. [...]
  15. }

Terminal when it fails:

(look the 2)
screenshot_1/2
screenshot_1/2

Terminal when it works:

screenshot

Somebody have an idea How to resolve my problem?

I think the solution is
either:

  • if fileName allready exist , just change the id by the newOne (or catch its id and use it for the imageId in user db)
    or:
    -if fileName allready exist , delete it and save the newOne

What do you think about this solution?
How to code it in Java?

答案1

得分: 0

我修复了我的问题。
根据规格的更新，我只在数据库和目录中为每个用户保留一张图片/头像。

因此，我已将删除操作（delete(user.imageId)）更改为删除所有与用户ID和类别（'avatar'）匹配的项。

英文:

I fixed my pb.
According to the update of the specifications, I keep in db and directory only one img/avatar for each user.

So I have changed the delete(user.imageId) by deleteAllByUserIdAndCategory(user.id, 'avatar').

huangapple
  • 本文由 发表于 2020年8月27日 23:16:45
  • 转载请务必保留本文链接：https://go.coder-hub.com/63619117.html
  • java
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定