Fatal编程技术网
  • java/
  • Java 无法在angular+；中同时上载多个文件；spring启动应用程序

Java 无法在angular+；中同时上载多个文件；spring启动应用程序

java typescript spring-boot spring-mvc

Java 无法在angular+；中同时上载多个文件；spring启动应用程序,java,typescript,spring-boot,spring-mvc,angular8,Java,Typescript,Spring Boot,Spring Mvc,Angular8,您好，我正在开发angular+spring引导应用程序，我编写了一个代码，通过循环文件列表，一次发送一个文件，我可以上载多个文件，但当我试图一次发送所有文件（文件列表）时，我无法这样做 html代码 <label> welcome {{name}}, welcome to new app. </label> <div> <input type="file" multiple placeholder="S

您好，我正在开发angular+spring引导应用程序，我编写了一个代码，通过循环文件列表，一次发送一个文件，我可以上载多个文件，但当我试图一次发送所有文件（文件列表）时，我无法这样做

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);
      }); 
    }
  }

}

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 { 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);
  }
}
一次上载所有文件的上载服务

  <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);
      }); 
    }
  }

}

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 { 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);
  }
}

从'@angular/core'导入{Injectable}；
从'@angular/common/http'导入{HttpClient，HttpEvent，HttpRequest}；
从“rxjs”导入{Observable}；
从'src/environments/environment'导入{environment}；
@注射的({
providedIn:'根'
})
导出类UploadserviceService{
构造函数（私有http:HttpClient）{}
uploadtoserver（selectedfiles:FileList）：可观察{
让url:string=environment.url+'uploadfile'；
console.log（url）；
const data:FormData=new FormData（）；
data.append（'selectedfiles'，selectedfiles）；
const newrequest=newhttprequest（'POST'，url，data{
报告进展：是的，
响应类型：“文本”
});
返回此.http.request（newrequest）；
}
}
一次上载所有文件的spring启动控制器（获取错误）

package com.example.demo；
导入java.net.http.HttpResponse；
导入java.util.HashMap；
导入java.util.Map；
导入org.springframework.http.HttpStatus；
导入org.springframework.http.ResponseEntity；
导入org.springframework.web.bind.annotation.CrossOrigin；
导入org.springframework.web.bind.annotation.PostMapping；
导入org.springframework.web.bind.annotation.RequestParam；
导入org.springframework.web.bind.annotation.RestController；
导入org.springframework.web.multipart.MultipartFile；
@交叉原点（原点=”http://localhost:4200")
@RestController
公共类上载控制器{
Map filemap=newhashmap（）；
@PostMapping（“/uploadfile”）
公共响应handlefileupload（@RequestParam（“selectedfiles”）多部分文件[]多文件）{
字符串消息=”；
试一试{
message=“成功”；
对于（int i=0；i错误


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);
        }
        
    }

}


您试图在控制器中获取
MultipartFile[]
param，但请求不是多部分请求。因此，获取以下错误

当前请求不是多部分请求

解决方案

请将每个文件分别附加到
FormData
中，然后将其发送给控制器，如下所示：


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);
}



uploadtoserver（selectedfiles:FileList）：可观察{
让url:string=environment.url+'uploadfile'；
const data:FormData=new FormData（）；

对于（设i=0；i错误是什么？是在前端还是在上载或处理服务器时？您是否可以添加一些有关该错误的详细信息，日志可以help@Avi我刚刚把错误贴在了帖子上。