发布 POST 请求时，Angular 中的文件上传会出错答案

【问题标题】：File Upload in Angular giving error when posting POST request发布 POST 请求时，Angular 中的文件上传会出错
【发布时间】：2021-03-25 19:46:54
【问题描述】：

我有一个这样的 HTML 表单，用于将文件从前端上传到后端并进行一些操作：

<button mat-raised-button color="primary" type="button" style='margin-right:20px' (click)="selectFile()">Select File To Upload</button> 
<input #fileUploadInput type="file" id="fileUpload" hidden name="avatar" (change)="fileChangeEvent($event)">
<button mat-raised-button color="primary" type="button" style='margin-right:20px' enctype="multipart/form-data" (click)="uploadFile()">Submit</button>
        
<br><br>
<a class="generate-full-width" style="color: darkred;" *ngIf="fileName"><strong>{{fileName}}</strong></a>

component.ts 是：

export class uploadFileDialog {

  constructor(
    public dialogRef: MatDialogRef<AddProductDialog>,
    private uploadService: UploadService,
    private builder: FormBuilder, public dialog: MatDialog,
    @Inject(MAT_DIALOG_DATA) public data) {
  }

  @ViewChild('fileUploadInput', {static: false})
  fileUploadVariable: ElementRef;
  fileName;
  currentFile: File;
  filesToUpload = [];

  resetFile(){
    this.fileUploadVariable.nativeElement.value = "";
  }

  
  selectFile(){
    this.resetFile();
    let el: HTMLElement = this.fileUploadVariable.nativeElement as HTMLElement;
    el.click();
  }

  fileChangeEvent(fileInput: any) {
    let file = fileInput.target.files[0]
    console.log(file)
    //console.log(file.data.toString());
    this.filesToUpload = [];
    this.filesToUpload.push(file);
    this.fileName = file['name'];
  }

  uploadFile(){
    this.currentFile = this.fileName;
    console.log(this.currentFile);
    this.uploadService.uploadFile(this.currentFile)
      .subscribe((data) => {
        
        console.log(data)
      },
      error => {
        console.log(error)
      });
  }
}

Service.ts 是：

uploadFile(file: File): Observable<any> {

    let headers = new HttpHeaders({
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
      //'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization'
      'Access-Control-Allow-Headers': 'Content-Type,Accept,X-Access-Token,X-Key,Authorization,X-Requested-With,Origin,Access-Control-Allow-Origin,Access-Control-Allow-Credentials,content-type=multipart/*'
    })

    let options = {headers:headers, observer: 'response'};

    const formData: FormData = new FormData();

    formData.append('file', file);

    //return this.http.post(this.url+'/fileUpload/upload', formData,options)
    const req = new HttpRequest('POST', this.url+'/fileUpload/upload', formData, {
      reportProgress: true,
      responseType: 'json'
    });

    return this.http.request(req);
  }

Java后端的控制器文件是：

@RestController
@CrossOrigin(origins = "*", allowedHeaders="*", exposedHeaders="Access-Control-Allow-Origin")
@RequestMapping("/fileUpload")

public class FileController {
    
    private final FileService fileService;
     
    @Autowired
    public FileController(FileService fileService) {
        this.fileService = fileService;
    }
 
    @PostMapping(value = "/upload")
    public void handleFileUpload(@RequestParam("file") MultipartFile file) throws IOException {
        fileService.storeFile(file);
    }}

Java 后端的服务文件是：

@Service
public class FileService {

    private static final String FILE_DIRECTORY = "D:\\temp";
     
    public void storeFile(MultipartFile file) throws IOException {
        Path filePath = Paths.get(FILE_DIRECTORY + "\" + file.getOriginalFilename());
 
        Files.copy(file.getInputStream(), filePath, StandardCopyOption.REPLACE_EXISTING);
    }
    
}

在控制台中上传时，我可以看到文件名。此外，在请求的正文中，formData 将 xml 文件显示为 Networks 选项卡中的内容。我的 Java 控制台，我收到错误：

2020-12-15 12:26:53.144  WARN 9688 --- [nio-8080-exec-8] .w.s.m.s.DefaultHandlerExceptionResolver : Resolved [org.springframework.web.multipart.support.MissingServletRequestPartException: Required request part 'file' is not present]

前端控制台出错：

HttpHeaderResponse {headers: HttpHeaders, status: 400, statusText: "OK", url: "http://localhost:8080/fileUpload/upload", ok: false, …}
headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
ok: false
status: 400
statusText: "OK"
type: 2
url: "http://localhost:8080/fileUpload/upload"
__proto__: HttpResponseBase

我做错了什么？

【问题讨论】：

不久前我在后端遇到过类似的问题。那时我在前端使用纯 JS，但我记得我通过添加对调度程序 servlet 的多部分支持来修复它。如果您使用 Spring MVC，请尝试在 web.xml 的 servlet XML 标记之间添加以下多部分属性：code 1048576020971520 5242880code 如果您使用 Spring Boot，请在 application.properties 中定义这些值
@Przemek 实际上文件大小非常小。那么在这种情况下也需要这样做吗？
我猜它是预配置的 Spring Boot，因为它嵌入了 tomcat，但我猜默认情况下不会添加纯 Spring 多部分支持。至少该解决方案在我的情况下有效。
如果您可以检查，请求和其他编码部分是否适合您？

标签： java html angular spring-boot file-upload

【解决方案1】：

您发送的只是文件名，而不是实际的文件 blob。

尝试进行以下更改，

component.ts：

  uploadFile() {
    this.currentFile = this.fileName;
    console.log(this.currentFile, this.filesToUpload[0]);
    this.uploadService.uploadFile(this.currentFile, this.filesToUpload[0])
      .subscribe((data) => {
        console.log(data)
      },
      error => {
        console.log(error)
   });
  }

service.ts

uploadFile(fileName: string, file: File): Observable<any> {

   let headers = new HttpHeaders({
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type,Accept,X-Access-Token,X-Key,Authorization,X-Requested-With,Origin,Access-Control-Allow-Origin,Access-Control-Allow-Credentials,content-type=multipart/*'
   })

  let options = {headers:headers, observer: 'response'};

  const formData: FormData = new FormData();

  formData.append('fileName', fileName);
  formData.append('file', file);

  const req = new HttpRequest('POST', this.url+'/fileUpload/upload', formData, {
    reportProgress: true,
    responseType: 'json'
  });

 return this.http.request(req);
}

请参阅此链接以了解有关formData的更多信息

【讨论】：