通过angular 5将文件对象发送到Spring Rest控制器 [英] Sending file object to Spring Rest controller through angular 5

问题描述

我正在尝试在客户端上传文件，并将HTTP Post请求发送到Spring Rest Controller.但是，当我在Rest控制器中收到文件对象时，我可以将其视为空". HTML代码:

I am trying to upload a file on client side and send HTTP Post request to Spring Rest Controller. But when I receive the file object in Rest controller I could see it as 'null'. HTML code :

<input type="file" id="myFile" (change) = "onFileChange($event)" #fileInput>

对应的.ts文件:

onFileChange($event) : void {
    let file:File = $event.target.files[0];
    let myReader: FileReader = new FileReader();       
    myReader.onloadend = function(e) {      
    }
    myReader.readAsText(file);
    const req = this.http.post('/abc',myReader.result, {
        headers: new HttpHeaders().set('content-type','application/pdf')
    });
    req.subscribe(
        (data) => {
            console.log(data);
        },
        (err: HttpErrorResponse) => {
            if(err.error instanceof Error) {
                //client side error
                console.log('An error occured: ',err.error.message);
            } else {
                console.log('Backend returned code', err.status, 'body was ',err.error);
            }
        }
    )
}

我的Spring Rest控制器:

My Spring Rest Controller :

@RequestMapping(value="/abc", method = RequestMethod.POST, consumes = "application/pdf") 
public ResponseEntity<String> uploadFile(@RequestBody MultipartFile file) {
    System.out.println("Inside Controller");
    return new ResponseEntity<>("true", HttpStatus.CREATED);
}

任何人都可以在这里帮助找到问题.

Could anyone please help to find out the issue here.

推荐答案

尝试以下代码

HTML模板

<input type="file" id="myFile" (change)="onFileChange(fileInput.files)" #fileInput>

TypeScript

import { Headers, RequestOptions } from '@angular/http'; // Import header and requestOptions

//On File Select
onFileChange(files: any) {

    let file: File = files[0];

    let headers = new Headers();
    let options = new RequestOptions({ headers: headers }); // Create header

    let formData = new FormData();
    formData.append('file', file); // Append file to formdata

    const req = this.http.post('/abc', formData, options);

    req.subscribe( (data) => {

        console.log(data); // Sucess response
    }, (err: HttpErrorResponse) => {

        // Erro response
        if(err.error instanceof Error) {
          //client side error
          console.log('An error occured: ',err.error.message);
        }
        else {
          console.log('Backend returned code', err.status, 'body was ',err.error);
        }
    })
}

Spring Controller

@RequestMapping(value="/abc", method = RequestMethod.POST) 
public ResponseGenerator uploadFile(@RequestParam MultipartFile file) {

    ResponseGenerator responseGenerator = new ResponseGenerator();

    try {

        if (file != null) {
            System.out.println(file.getOriginalFilename());
        }
        return responseGenerator;
    } catch (Exception e) {
        logger.error("Error while updating user : ", e);
        return responseGenerator;
    }
}

如果创建一个service并将http方法code放入该service中，则将是更好的方法.请参阅此链接 Angular 2模板输入type = file和spring boot的表单

It will be better way if you create one service and put your http method code in that service. refer this link Angular 2 template form with input type=file and spring boot

这篇关于通过angular 5将文件对象发送到Spring Rest控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！