angular2 primeng fileupload问题

Question

我正在使用here中的ngprime fileupload上传文件并将其发送到验证rest service的{​​{1}}，然后将文件内容保存到数据库，但在上传文件时遇到问题

这是我的 fileupload.html

swagger json

和

我正在......    <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)

我的代码中的问题是什么？

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  
      }

这里＆＃34; myfile＆＃34;是指组件中给出的name属性。

Answer 2

我正在使用Jersey，下面是我的工作代码，用于上传primeng文件（angular 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() {
  }

}

web服务

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