如何使用angular6确保用户在mysql中使用图像

Posted 2023-02-27

【中文标题】如何使用angular6确保用户在mysql中使用图像

【英文标题】：How to ensure user with image in mysql with angular6

【发布时间】：2021-04-25 03:05:03

【问题描述】：

我正在尝试创建新用户。我想将带有图像的用户信息发送到 mysql 数据库。我正在发送一个带有表单数据的用户对象。 这是我的组件.ts

subscribeUser() 
this.errorMessage = "";
if (this.subscribeForm.invalid) 
  this.errorMessage = "cannot create user with empty fields";
  return;

this.userService.createUser(this.user, this.selectedFile)
  .subscribe(data => 
    console.log(data);
    this.router.navigate(['/login']);
  , error => 
    console.log(error);
  );
 
   public onFileChanged(event) 
console.log(event);
this.selectedFile = event.target.files[0];
console.log(this.selectedFile);

这是我的服务.ts

createUser(user: User,file : File)  let formdata: FormData = new FormData(); const userBlob = new Blob([JSON.stringify("firstname":user.firstname,"lastname":user.lastname,"mail":user.mail,"password":user.password)], type: "application/json");formData.append('file', file); formData.append('user', userBlob);return this.http.post<User>(AppSettings.APP_URL + "/users/new", formData,responseType:'text' as 'json');

这是我的controller.java

@PostMapping(value="/",
        produces = MediaType.APPLICATION_JSON_VALUE,
        consumes = MediaType.APPLICATION_JSON_VALUE, MediaType.MULTIPART_FORM_DATA_VALUE,"multipart/form-data"))
public ResponseEntity createUser(@RequestPart("file") MultipartFile file, @RequestPart("user") User user) throws IOException 

    if(user == null)
        return ResponseEntity.badRequest().body("cannot create user with empty fields");
    
   
    User createdUser = userRepository.save(user);
    return ResponseEntity.ok(createdUser);

这是我的组件.html

  <form [formGroup]="subscribeForm" (ngSubmit)="subscribeUser()" novalidate>
  <div class="form-group">
    <label for="formGroupExampleInput">Nom</label>
    <input type="text" class="form-control" id="firstname" [(ngModel)]="user.firstname" name="firstname" placeholder="Nom" formControlName="nom">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Prénom</label>
    <input type="text" class="form-control" id="lastname" [(ngModel)]="user.lastname" name="lastname" placeholder="Prenom" formControlName="prenom">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput3">Email</label>
    <input type="text" class="form-control" id="mail" [(ngModel)]="user.mail" placeholder="Email" name="mail" formControlName="mail" >
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput4">Password</label>
    <input type="text" class="form-control" id="password" [(ngModel)]="user.password" placeholder="Password" formControlName="password" >
  </div>
  <div class="form-group">
  <input type="file" [(ngModel)]="user.photo" (change)="onFileChanged($event)"></div>
    <button class="btn btn-primary"  type="submit">Register</button>
</form>

我收到此错误

“不支持内容类型‘application/octet-stream’”

谢谢

【问题讨论】：

你似乎没有对 uploadImageData 做任何事情？

服务中返回请求不接受uploadImageData

您需要使用 formdata.append 处理所有数据..

我更新了我的代码，但出现了一个新错误

【参考方案1】：

您是否考虑将图像类型从文件更改为 BLOB。

在 REST Controller 中，您可以将其视为 MultipartFile

编辑：你得到的错误

“不支持内容类型'application/octet-stream'”

我认为这是您的标题 mime 类型（请参阅此 mime type）

【讨论】：

谢谢，我找到解决方案并更新代码