Angular无法添加图片求助：后端Spring Boot无异常

我尝试添加一条包含titre、contenu、img字段的Publicite，后端基于Spring Boot实现无异常，但前端Angular请求返回400状态码，请求排查修复。

相关代码 #

addpublicite.component.ts #

addForm: any;
imageURL1: any;
userFile;
img: any;
imagesrc: any; // 补充声明变量

ngOnInit(): void {
  this.addForm = this.formbuilder.group({
    titre: ['', Validators.required],
    contenu: ['', Validators.required],
    img: ['', Validators.required]
  });
}

onFileChange(event) {
  const reader = new FileReader();
  if(event.target.files && event.target.files.length>0) {
    const file = event.target.files[0];
    this.img = file;
    reader.readAsDataURL(file);
    reader.onload = () => {
      this.imagesrc = reader.result as string;
      this.addForm.patchValue({
        img: reader.result
      });
      console.log(event)
      console.log(this.img)
    };
  }
}

addphotoo() {
  const formData = new FormData();
  formData.append('titre', this.addForm.value.titre);
  formData.append('contenu', this.addForm.value.contenu);
  // 修复：传递文件对象而非文件名
  formData.append('img', this.img);
  console.log(this.addForm);
  this.pubservice.createDataphoto(formData).subscribe( (data:any) => {
      this.data = data;
      this.router.navigate(['/dashboard/publicite']);
      console.log(this.data)
    },
    (err) => {alert('error.')}
  );
  console.log(this.data)
}

addpublicite.component.html #

<form action="#" [formGroup]="addForm" (ngSubmit)="addphotoo()">
  <div class="user-details">
    <div class="input-box">
      <span class="details">Titre</span>
      <input type="text" name="titre" placeholder="Entrer le titre" formControlName="titre" required>
    </div>

    <div class="input-box">
      <span class="details">Contenu</span>
      <textarea name="contenu" placeholder="Entrer le contenu" formControlName="contenu" required></textarea>
    </div>
    
    <div class="input-box">
      <span class="details">Image</span>
      <input
             id="file"
             type="file"
             name="img" placeholder="image" accept="image/*"
             (change)="onFileChange($event)"
             required style="width: 400px" >
      <img [src]="imagesrc" *ngIf="imagesrc" style="width:110px;height: 70px;margin-left: 160px;margin-top: 5px">
    </div>
  </div>

  <div class="button">
     <input type="submit" value="Ajouterphoto" >
    <input type="button" value="Fermer" (click)="closeDialog()"> <!-- 修复：用button而非submit，避免触发表单提交 -->
  </div>

</form>

错误信息 #

• 控制台返回400 Bad Request状态码
• 网络请求体数据：
  • titre: pub1
  • contenu: kljh
  • img: image.png（仅传递了文件名，未传递实际文件）

核心修复点 #

1. 文件传递错误：原代码中formData.append('img', this.img.name)仅传递了图片文件名，后端需要接收MultipartFile类型的文件对象，因此修改为formData.append('img', this.img)。
2. 表单提交按钮冲突：“Fermer”按钮使用type="submit"会触发表单提交，改为type="button"避免不必要的请求。
3. 变量声明缺失：补充imagesrc变量的声明，避免控制台出现未定义错误。

内容的提问来源于stack exchange，提问作者Amira