angular 2 PrimeNG + spring 引导文件上传错误400

Question

我正在尝试使用 primeNG 将文件上传到 spring 引导服务器端应用程序。但是我收到错误 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);
        }   
    }

Answer 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>

angular 2 PrimeNG + spring 引导文件上传错误400

angular 2 PrimeNG + spring boot file upload error 400

angular

spring-boot

primeng