angular2 primeng文件上传问题

Question

我使用ngprime fileupload从here上传文件并将其发送到rest service，验证swagger json然后将文件内容保存到数据库，但在上传文件时遇到问题。

这里是我的fileupload.html

<div class="ui-g"> 
<p-growl [value]="msgs"></p-growl> 
<form [formGroup]="uploadForm" novalidate> 
<div class="ui-g-12"> 
    <div class="ui-grid-row"> 
    <div class="ui-grid-col-12" [ngClass]="{'has-error':!uploadForm.controls['activity'].valid && uploadForm.controls['activity'].touched}"> 
     <div class="ui-grid-col-2"><label>Product Name </label></div> 
     <div class="ui-grid-col-8"> 
     <input class="inputtext" type="text" formControlName="activity" placeholder="Product Activity"/> 
     <div *ngIf="uploadForm.controls['activity'].hasError('required') && uploadForm.controls['activity'].touched" class="alert alert-danger">You must enter Product Name.</div> 
     </div> 
    </div> 
    </div> 
</div> 
<div class="ui-g-12" > 
    <p-fileUpload name="demo[]" url="{{uploadUrl}}" (onUpload)="onUpload($event)" accept=".json,.text,.yml" maxFileSize="1000000" [disabled]="!uploadForm.valid"> 
    <template pTemplate="content"> 
     <ul *ngIf="uploadedFiles.length"> 
     <li *ngFor="let file of uploadedFiles">{{file.name}} - {{file.size}} bytes</li> 
     </ul> 
    </template> 
    </p-fileUpload> 
</div> 

和

我越来越... XMLHttpRequest cannot load http://localhost:8080/upload. Response for preflight is invalid (redirect)错误。其实这个请求甚至不会进入我正在本地运行的休息服务......

@RequestMapping(value = "/upload", method = RequestMethod.POST) 
public ResponseEntity uploadFile(MultipartHttpServletRequest request, HttpServletResponse response, HttpServletRequest httpRequest) { 
    /swagger validation logic 
} 

我的代码中有什么问题？

Answer 1

使用下面的REST端点消耗正在上传的文件，并创建JSON响应

@RequestMapping(value = "/upload", 
    method = RequestMethod.POST, 
    produces = MediaType.APPLICATION_JSON_VALUE, 
    consumes = MediaType.MULTIPART_FORM_DATA_VALUE) 
    public @ResponseBody ResponseEntity uploadFile(@RequestParam("myfile") MultipartFile file, String fileName) throws IllegalStateException, IOException { 
     /swagger validation logic 
     } 

这里的“MYFILE”是指在给定的组件的name属性。

Answer 2

嗯，我正在使用泽西以下是primeng文件上传我的工作代码（角4）

HTML代码

<div class="row header"> 
    <div class="col-xs-1">&nbsp;</div> 
    <div class="col-xs-1">&nbsp;</div> 
    <div class="col-xs-1">&nbsp;</div> 
    <div class="col-xs-1">&nbsp;</div> 
    <div class="col-xs-1">&nbsp;</div> 
    <div class="col-xs-1">&nbsp;</div> 
    <div class="col-xs-1">&nbsp;</div> 
    <div class="col-xs-1">&nbsp;</div> 
    <div class="col-xs-1">&nbsp;</div> 

    <div class="col-xs-3"> 
    <p> 
    owner-shop-customization works! 
    <p-fileUpload name="file" url="http://localhost:1006/jsflab/rest/OwnerMyShop/uploadShopLogo"></p-fileUpload> 
</p> 
    </div> 
</div> 

TS

import { Component, OnInit } from '@angular/core'; 
import {FileUploadModule} from 'primeng/primeng'; 

@Component({ 
    selector: 'app-owner-shop-customization', 
    templateUrl: './owner-shop-customization.component.html', 
    styleUrls: ['./owner-shop-customization.component.css'] 
}) 
export class OwnerShopCustomizationComponent implements OnInit { 

    constructor() { } 

    ngOnInit() { 
    } 

} 

Webservice的

@POST 
    @Path("/uploadShopLogo") 
    @Consumes({MediaType.MULTIPART_FORM_DATA}) 
    public Response uploadPdfFile( @FormDataParam("file") InputStream fileInputStream, 
            @FormDataParam("file") FormDataContentDisposition fileMetaData) throws Exception 
    { 
      String fileLocation = "C://" + fileMetaData.getFileName(); 
        //saving file 
      try { 
       FileOutputStream out = new FileOutputStream(new File(fileLocation)); 
       int read = 0; 
       byte[] bytes = new byte[1024]; 
       out = new FileOutputStream(new File(fileLocation)); 
       while ((read = fileInputStream.read(bytes)) != -1) { 
        out.write(bytes, 0, read); 
       } 
       out.flush(); 
       out.close(); 
      } catch (IOException e) {e.printStackTrace();} 
      String output = "File successfully uploaded to : " + fileLocation; 
      return Response.status(200).entity(output).build(); 
     } 

web.xml

<servlet> 
     <servlet-name>Jersey RESTful Application</servlet-name> 
     <servlet-class>org.glassfish.jersey.servlet.ServletContainer</servlet-class> 
     <init-param> 
     <param-name>jersey.config.server.provider.packages</param-name> 
     <param-value>invoicegeneratorwebservice</param-value> 
     </init-param> 
     <init-param> 
    <param-name>jersey.config.server.provider.classnames</param-name> 
    <param-value>org.glassfish.jersey.filter.LoggingFilter; 
    org.glassfish.jersey.media.multipart.MultiPartFeature</param-value> 
</init-param> 
    <load-on-startup>1</load-on-startup> 
    </servlet> 
    <servlet-mapping> 
     <servlet-name>Jersey RESTful Application</servlet-name> 
     <url-pattern>/rest/*</url-pattern> 
    </servlet-mapping> 

的pom.xml

<dependency> 
    <groupId>org.glassfish.jersey.bundles</groupId> 
    <artifactId>jaxrs-ri</artifactId> 
    <version>2.17</version> 
</dependency> 

<!-- https://mvnrepository.com/artifact/org.glassfish.jersey.media/jersey-media-json-jackson --> 
<dependency> 
    <groupId>org.glassfish.jersey.media</groupId> 
    <artifactId>jersey-media-json-jackson</artifactId> 
    <version>2.25.1</version> 
</dependency> 
<dependency> 
    <groupId>org.glassfish.jersey.media</groupId> 
    <artifactId>jersey-media-multipart</artifactId> 
    <version>2.17</version> 
</dependency>