具有输入类型=文件和弹簧引导的 Angular 2 模板表单 [英] Angular 2 template form with input type=file and spring boot

问题描述

我有一个有两个输入的表单:一个是文本，另一个是文件.我如何将文件传递给后端 Spring Boot?以及如何使用 postgresql 数据库存储它或获取内容数据.提前感谢您的退货.

I have a form with two inputs: one type text and the other is file. how can i pass the file to backend spring boot? and how to store it or get there content data with postgresql database. thank you in advance for return.

推荐答案

HTML 文件

<input #csvFile accept=".csv" #file (change)="onCSVFileSelect(file.files)" type="file">

TypeScript 文件 组件类

@ViewChild('csvFile') csvFile: any;

//On File Select
onCSVFileSelect(files) {
    let file: File = files[0];

    if (file.type == "text/csv") {

        this.selectedFileName = file.name;
        this.customerService.uploadCustomerFile(file).subscribe((fileUploadResponse) => {
           //Success Block
        }, (error) => {
           //Error Block
        });
    } else {
        //alert("Plase select .csv file");
        this.reset();
    }
}

TypeScript 文件服务类

uploadCustomerFile(access_token: string, file: File): Observable<any> {

        let headers = new Headers();

        let options = new RequestOptions({ headers: headers }); 

        let formData = new FormData();
        formData.append('customerData', file);       

        return this.http.post(this.baseUrl + "getCustomerCSVFile", formData, options)
                .map((res: Response) => res.json() || {});
}

弹簧控制器

@RequestMapping(value = "/getCustomerCSVFile", method = RequestMethod.POST)
public ResponseGenerator getCustomerCSVFile(@RequestParam MultipartFile customerData) {
        ResponseGenerator responseGenerator = new ResponseGenerator();
        try {

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

这篇关于具有输入类型=文件和弹簧引导的 Angular 2 模板表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！