angular 2 PrimeNG + spring boot文件上传错误400答案

【问题标题】：angular 2 PrimeNG + spring boot file upload error 400angular 2 PrimeNG + spring boot文件上传错误400
【发布时间】：2017-05-11 14:07:57
【问题描述】：

我正在尝试将带有 primeNG 的文件上传到 Spring Boot 服务器端应用程序。但我收到错误 400..

这是我的代码： app.html

<p-fileUpload name="myfile[]" url="http://localhost:8080/upload" (onUpload)="onUpload($event)" >
        <template pTemplate type="content">
            <ul *ngIf="uploadedFiles.length">
                <li *ngFor="let file of uploadedFiles">{{file.name}} - {{file.size}} bytes</li>
            </ul>
        </template>        
    </p-fileUpload>

app.ts

msgs: Message[];
  uploadedFiles: any[] = [];

    onUpload(event) {
        for(let file of event.files) {
            this.uploadedFiles.push(file);
        }

        this.msgs = [];
        this.msgs.push({severity: 'info', summary: 'File Uploaded', detail: ''});
    }

Spring 启动控制器：

@RequestMapping(value="/upload",
            method=RequestMethod.POST, 
            consumes = MediaType.MULTIPART_FORM_DATA_VALUE,
            produces = MediaType.APPLICATION_JSON_VALUE)
    public @ResponseStatus(HttpStatus.CREATED) ResponseEntity processUpload(@RequestParam("myfile") MultipartFile file) throws IOException {

            return ResponseEntity.ok("Fichier En cours de Traitement..");
    }

CORS 配置

        HttpServletResponse response = (HttpServletResponse) sRes;
        HttpServletRequest request = (HttpServletRequest) sReq;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Origin", "*");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "Origin, Authorization, Content-Type, Accept, X-Requested-With, Cache-Control, Accept");
        response.setHeader("Access-Control-Expose-Headers", "X-Requested-With, Authorization");

        if("OPTIONS".equalsIgnoreCase(request.getMethod())) {
            response.setStatus(HttpServletResponse.SC_OK);
        } else {
            fc.doFilter(sReq, response);
        }   
    }

【问题讨论】：

服务器说什么？我的意思是，这个 400 响应有正文吗？另外，尝试使用name="myfile"；我正在使用相同的堆栈，“myfile[]”对我不起作用。
这就是解决方案..!!!谢谢@IlyaNovoseltsev

标签： angular spring-boot primeng

【解决方案1】：

您应该在 PrimeNG 上传中使用 name="myfile" - 这是您的 Spring 控制器所期望的名称。

app.html：

<p-fileUpload name="myfile" url="http://localhost:8080/upload" 
    (onUpload)="onUpload($event)" >
            <template pTemplate type="content">
                <ul *ngIf="uploadedFiles.length">
                    <li *ngFor="let file of uploadedFiles">{{file.name}} - {{file.size}} bytes</li>
                </ul>
            </template>        
        </p-fileUpload>

【讨论】：