在angular+spring引导应用程序中无法一次上传多个文件

Question

html代码

  <label>
    welcome {{name}}, welcome to new app.
</label>
<div>
    <input type="file" multiple placeholder="Select Files to be upload" accept=".xlsx" (change)=selectedfiles($event)>
</div>

用于遍历文件列表并一次上载一个文件列表的上载逻辑

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { HttpClient } from '@angular/common/http';
import { environment } from 'src/environments/environment';
import {UploadserviceService} from '../uploadservice.service';
import { HttpResponse, HttpEventType } from '@angular/common/http';
@Component({
  selector: 'app-welcome',
  templateUrl: './welcome.component.html',
  styleUrls: ['./welcome.component.css']
})
export class WelcomeComponent implements OnInit {

  name='';
  selectedxlfiles:FileList;
  url=environment.url;
  result:any;
  currentfile:File;
  fileandinstancekeyobj:any={};

  constructor(private router:ActivatedRoute,private http: HttpClient,private uploadservice:UploadserviceService) { }

  ngOnInit(): void {
    this.name=this.router.snapshot.params['name'];
  }

  selectedfiles(event){

    this.selectedxlfiles=event.target.files;
    for(let i=0;i<this.selectedxlfiles.length;i++){
      console.log(this.selectedxlfiles[i]);
      this.currentfile=this.selectedxlfiles[i];
      this.uploadservice.uploadtoserver(this.currentfile).subscribe((res:any)=>{
        console.log(res.body);
      }); 
    }
  }

}

一次上载一个文件的Servicecall逻辑

import { Injectable } from '@angular/core';
import { HttpClient, HttpEvent, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment';

@Injectable({
  providedIn: 'root'
})
export class UploadserviceService {

  constructor(private http:HttpClient) { }

  uploadtoserver(selectedfile:File): Observable<HttpEvent<{}>>{

    let url:string=environment.url+'uploadfile';
    console.log(url);
    const data: FormData=new FormData();
    data.append('selectedfile', selectedfile);
    const newrequest=new HttpRequest('POST',url,data,{
      reportProgress: true,
      responseType: 'text'
    });

    return this.http.request(newrequest);
    //return this.http.post(url,selectedfiles);
  }
}

package com.example.demo;

import java.net.http.HttpResponse;
import java.util.HashMap;
import java.util.Map;

import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

@CrossOrigin(origins = "http://localhost:4200")
@RestController
public class uploadController {
    Map<String, MultipartFile> filemap=new HashMap<String, MultipartFile>();
    
    @PostMapping("/uploadfile")
    public ResponseEntity<String> handlefileupload(@RequestParam("selectedfile") MultipartFile multifile){
        String message="";
        uploaddto dto=new uploaddto();
        try {
            message="succesfull";
            System.out.println(multifile.getOriginalFilename());
            return ResponseEntity.status(HttpStatus.OK).body(message);
        } catch (Exception e) {
            e.printStackTrace();
            message="failed";
            return ResponseEntity.status(HttpStatus.EXPECTATION_FAILED).body(message);
        }
        
    }

}

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { HttpClient } from '@angular/common/http';
import { environment } from 'src/environments/environment';
import {UploadserviceService} from '../uploadservice.service';
import { HttpResponse, HttpEventType } from '@angular/common/http';
@Component({
  selector: 'app-welcome',
  templateUrl: './welcome.component.html',
  styleUrls: ['./welcome.component.css']
})
export class WelcomeComponent implements OnInit {

  name='';
  selectedxlfiles:FileList;
  url=environment.url;
  result:any;
  currentfile:File;

  constructor(private router:ActivatedRoute,private http: HttpClient,private uploadservice:UploadserviceService) { }

  ngOnInit(): void {
    this.name=this.router.snapshot.params['name'];
  }

  selectedfiles(event){

    this.selectedxlfiles=event.target.files;
      this.uploadservice.uploadtoserver(this.selectedxlfiles).subscribe((res:any)=>{
        console.log(res.body);
      }); 
  }

}

import { Injectable } from '@angular/core';
import { HttpClient, HttpEvent, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment';

@Injectable({
  providedIn: 'root'
})
export class UploadserviceService {

  constructor(private http:HttpClient) { }

  uploadtoserver(selectedfiles:FileList): Observable<HttpEvent<{}>>{

    let url:string=environment.url+'uploadfile';
    console.log(url);
    const data: FormData=new FormData();
    data.append('selectedfiles', selectedfiles);
    const newrequest=new HttpRequest('POST',url,data,{
      reportProgress: true,
      responseType: 'text'
    });

    return this.http.request(newrequest);
  }
}

package com.example.demo;

import java.net.http.HttpResponse;
import java.util.HashMap;
import java.util.Map;

import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

@CrossOrigin(origins = "http://localhost:4200")
@RestController
public class uploadController {
    Map<String, MultipartFile> filemap=new HashMap<String, MultipartFile>();
    
    @PostMapping("/uploadfile")
    public ResponseEntity<String> handlefileupload(@RequestParam("selectedfiles") MultipartFile[] multifile){
        String message="";
        try {
            message="succesfull";
            for(int i=0;i<multifile.length;i++){
            System.out.println(multifile[i].getOriginalFilename());
             }
            return ResponseEntity.status(HttpStatus.OK).body(message);
        } catch (Exception e) {
            e.printStackTrace();
            message="failed";
            return ResponseEntity.status(HttpStatus.EXPECTATION_FAILED).body(message);
        }
        
    }

}

2020-09-21 00:38:24.114错误11348---[nio-5200-exec-5]O.a.C.C.C.[.[.[/].[dispatcherServlet]:路径为[]的上下文中servlet[dispatcherServlet]的servlet.Service（）引发异常[请求处理失败；嵌套异常为org.springframework.web.multipart.multipartException：当前请求不是多部分请求]，具有根本原因

Answer 1

错误

尝试在controller中获取multipartfile[]参数，但请求不是多部分请求。因此得到以下错误。

当前请求不是多部分请求

uploadtoserver(selectedfiles:FileList): Observable<HttpEvent<{}>>{

    let url:string=environment.url+'uploadfile';
    const data: FormData=new FormData();

    for(let i=0;i<selectedfiles.length;i++){
        data.append('selectedfiles', selectedfiles[i]);
    }

    const newrequest=new HttpRequest('POST',url,data,{
    reportProgress: true,
    responseType: 'text'
    });

    return this.http.request(newrequest);
}