angular2 primeng文件上传问题

Question

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

这是我的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"指的是component中给定的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() {
  }

}

网络服务

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

angular2 primeng文件上传问题

angular2 primeng fileupload issue

angular

file-upload

primeng

HTML代码

TS

网络服务

web.xml

pom.xml