如何在JHipster表单中实现文件上传？（JHipster5+Angular5环境）

很高兴你已经成功搞定了服务端的文件上传部分！我来补充一些前端（Angular 5）和JHipster相关的细节，帮你把整个文件上传的完整流程补全：

• 首先，你的表单需要设置enctype="multipart/form-data"才能正确传递文件，在Angular模板里可以这样写：

<form #emailJobForm="ngForm" (ngSubmit)="onSubmit(emailJobForm)" enctype="multipart/form-data">
  <!-- 常规字段示例 -->
  <input type="text" name="subject" [(ngModel)]="emailJobDTO.subject" placeholder="邮件主题" required>
  <textarea name="content" [(ngModel)]="emailJobDTO.content" placeholder="邮件内容" required></textarea>
  
  <!-- 文件输入项 -->
  <input type="file" name="attachment" (change)="onFileSelected($event)" accept=".pdf,.docx,.xlsx" required>
  
  <button type="submit" [disabled]="!emailJobForm.valid">提交任务</button>
</form>

• 在组件类中，需要处理文件选择事件和表单提交逻辑：

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';

@Component({
  selector: 'app-email-job-form',
  templateUrl: './email-job-form.component.html'
})
export class EmailJobFormComponent {
  emailJobDTO: any = {};
  selectedFile: File | null = null;

  constructor(private http: HttpClient) {}

  onFileSelected(event: Event): void {
    const input = event.target as HTMLInputElement;
    if (input.files && input.files.length > 0) {
      this.selectedFile = input.files[0];
    }
  }

  onSubmit(form: any): void {
    if (this.selectedFile && form.valid) {
      const formData = new FormData();
      // 将DTO的所有字段添加到FormData中
      Object.entries(this.emailJobDTO).forEach(([key, value]) => {
        formData.append(key, value);
      });
      // 添加选中的文件
      formData.append('file', this.selectedFile);

      this.http.post('/api/email-jobs', formData)
        .subscribe({
          next: (response) => {
            console.log('任务创建成功', response);
            // 这里可以添加成功后的操作，比如重置表单、跳转页面或弹出提示
            form.resetForm();
            this.selectedFile = null;
          },
          error: (err) => {
            console.error('任务创建失败', err);
            // 处理错误，比如显示错误提示
          }
        });
    }
  }
}

• 你当前的服务端方法写法是正确的，需要注意**MultipartFile参数必须放在@RequestBody参数之前**，因为Spring MVC处理多部分请求时，文件参数需要优先解析：

@PostMapping("/email-jobs")
@Timed
public ResponseEntity<EmailJobDTO> createEmailJob(MultipartFile file, @Valid @RequestBody EmailJobDTO emailJobDTO) throws URISyntaxException {
    // 你的业务逻辑：比如保存文件到服务器、解析文件内容、关联EmailJob数据等
    EmailJob emailJob = emailJobMapper.toEntity(emailJobDTO);
    // 处理文件，例如保存到本地存储或云存储
    String filePath = saveFileToStorage(file);
    emailJob.setAttachmentPath(filePath);
    
    emailJob = emailJobRepository.save(emailJob);
    EmailJobDTO resultDTO = emailJobMapper.toDto(emailJob);
    return ResponseEntity.created(new URI("/api/email-jobs/" + resultDTO.getId()))
        .headers(HeaderUtil.createEntityCreationAlert(applicationName, true, ENTITY_NAME, resultDTO.getId().toString()))
        .body(resultDTO);
}

• 若需要限制文件大小，可以在application.yml中配置：

spring:
  servlet:
    multipart:
      max-file-size: 10MB  # 单个文件最大大小
      max-request-size: 15MB  # 整个请求的最大大小

• 如果你的JHipster项目集成了Swagger，需要确保Swagger能识别多部分请求，这样可以在Swagger UI中直接测试文件上传功能。

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