angular2 primeng文件上传问题
angular2 primeng fileupload issue
我正在使用 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
}
我的代码有什么问题?
使用以下 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属性
我正在使用 Jersey,下面是我上传 primeng 文件的工作代码 (angular 4)
HTML代码
<div class="row header">
<div class="col-xs-1"> </div>
<div class="col-xs-1"> </div>
<div class="col-xs-1"> </div>
<div class="col-xs-1"> </div>
<div class="col-xs-1"> </div>
<div class="col-xs-1"> </div>
<div class="col-xs-1"> </div>
<div class="col-xs-1"> </div>
<div class="col-xs-1"> </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>
我正在使用 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
}
我的代码有什么问题?
使用以下 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属性
我正在使用 Jersey,下面是我上传 primeng 文件的工作代码 (angular 4)
HTML代码
<div class="row header">
<div class="col-xs-1"> </div>
<div class="col-xs-1"> </div>
<div class="col-xs-1"> </div>
<div class="col-xs-1"> </div>
<div class="col-xs-1"> </div>
<div class="col-xs-1"> </div>
<div class="col-xs-1"> </div>
<div class="col-xs-1"> </div>
<div class="col-xs-1"> </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>