我是Dropwizard和angularJs中的noob，并尝试使用DropWizard和AngularJs（在前面）使用文件上传。我的用例如下： 一个类似于步骤的向导，步骤1将要求用户上传2个文件，然后步骤2将要求用户提供2个输入（文本字段）并单击验证。
我使用了3个控制器：
1. MainController（在体内）用于使用angularJs ngDialog script创建解释器
2.在Maincontroller中上传Controller以上传文件
3.验证控制器以从用户获取输入以验证文本。
出于某种原因，我无法让它工作到我决定现在使用不同框架的程度。这将是我的最后一次尝试。以下是一些代码片段
<head>
.....
.....
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular/angular-messages.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"/>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="js/ngDialog.min.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="myValidatorApp" ng-controller="MainCtrl">
<div class="buttons">
<a href="#" ng-click="open()" class="demo">Explainer</a>
<a href="#step1" class="btn btn-dark btn-lg">Go to Step 1</a>
</div>
</div>
<!-- Step 1 -->
<section id="step1" class="services bg-section" ng-controller="UploadCtrl">
<div class="container">
<div class="row text-center">
<div class="col-lg-10 col-lg-offset-1">
<h2>Step 1 - Upload Weight Data</h2>
<form id="fileupload1" action="/service/upload/weight" method="POST" enctype="multipart/form-data">
<!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
<div class="row fileupload-buttonbar">
<div class="col-lg-7">
<span>
<span>Upload Weight data</span>
</span>
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button" ng-class="{disabled: disabled}">
<i class="glyphicon glyphicon-plus"></i>
<span>Add File...</span>
<input type="file" name="WeightData" multiple ng-disabled="disabled">
</span>
<span>
<button type="button" class="btn btn-light" ng-click="upload('modulus')">
<i class="glyphicon glyphicon-upload"></i>
<span>Start upload</span>
</button>
</span>
</div>
<!-- The global progress state -->
<div class="col-lg-5 fade" data-ng-class="{in: active()}">
<!-- The global progress bar -->
<div class="progress progress-striped active" data-file-upload-progress="progress()">
<div class="progress-bar progress-bar-success" data-ng-style="{width: num + '%'}"></div>
</div>
<!-- The extended global progress state -->
<div class="progress-extended"> </div>
</div>
</div>
</form>
<br/>
<br/>
<form id="fileupload2" action="/upload/sortcode" method="POST" enctype="multipart/form-data">
<!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
<div class="row fileupload-buttonbar">
<div class="col-lg-7">
<span>
<span>Upload Substitution data</span>
</span>
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button" ng-class="{disabled: disabled}">
<i class="glyphicon glyphicon-plus"></i>
<span>Add File...</span>
<input type="file" name="sortcodeData" multiple ng-disabled="disabled">
</span>
<span>
<button type="button" class="btn btn-light" ng-click="upload('sortcode')">
<i class="glyphicon glyphicon-upload"></i>
<span>Start upload</span>
</button>
</span>
<!-- The global file processing state -->
<span class="fileupload-process"></span>
</div>
<!-- The global progress state -->
<div class="col-lg-5 fade" data-ng-class="{in: active()}">
<!-- The global progress bar -->
<div class="progress progress-striped active" data-file-upload-progress="progress()">
<div class="progress-bar progress-bar-success" data-ng-style="{width: num + '%'}"></div>
</div>
<!-- The extended global progress state -->
<div class="progress-extended"> </div>
</div>
</div>
</form>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div align="center">
<a href="#step2" class="btn btn-dark btn-lg">Go to Step 2</a>
</div>
</section>
<!-- Validation -->
<section id="#step2" class="services bg-section" ng-controller="ValidateCtrl">
<div class="container">
<div class="row text-center">
<div class="col-lg-10 col-lg-offset-1">
<h2>Step 2 - Provide Sortcode and AccountNumber</h2>
<div class="row">
<form name="userForm" novalidate>
<!-- sortcode field -->
<div class="form-group" ng-class="{'has-error': userForm.sortcode.$touched && userForm.sortcode.$invalid }">
<label>Sort Code (6 digit)</label>
<input type="text" name="sortcode" class="form-control" ng-model="main.sortcode" ng-minlength="6" ng-maxlength="6" required>
<!-- ngMessages goes here -->
<p ng-show="userForm.sortcode.$error.empty" class="message-block">Sortcode is required.</p>
<p ng-show="userForm.sortcode.$error.minlength" class="message-block">Sortcode is too short.</p>
<p ng-show="userForm.sortcode.$error.minlength" class="message-block">Sortcode is too long.</p>
</div>
<!-- account number field -->
<div class="form-group" ng-class="{'has-error': userForm.accountnumber.$touched && userForm.accountnumber.$invalid }">
<label>Account Number (8 digit)</label>
<input type="text" name="accountnumber" class="form-control" ng-model="main.accountnumber" ng-minlength="8" ng-maxlength="8" required>
<!-- ngMessages goes here -->
<p ng-show="userForm.accountnumber.$invalid && !userForm.accountnumber.$pristine" class="message-block">Account Number is required.</p>
<p ng-show="userForm.accountnumber.$error.minlength" class="message-block">Account Number is too short</p>
<p ng-show="userForm.accountnumber.$error.minlength" class="message-block">Account Number is too long.</p>
</div>
<div class="form-group">
<button type="submit" class="btn btn-danger">Validate</button>
</div>
</form>
</div>
<!-- /.row (nested) -->
</div>
<!-- /.col-lg-10 -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
我的app.js
var UploadCtrl = function ($scope, $http)
{
var serviceURI = "/service/";
$scope.upload = function(uploadType) {
if(uploadType == "modulus"){
var response = $http.post('/service/upload/modulusweight', $scope.jsonObj);
response.success(function(data, status, headers, config) {
$scope.resetSearch();
});
response.error(function(data, status, headers, config) {
alert("AJAX failed to get data, status=" + status);
});
} else if(uploadType == "sortcode"){
var response = $http.post('/service/upload/sortcode', $scope.jsonObj);
response.success(function(data, status, headers, config) {
$scope.resetSearch();
});
response.error(function(data, status, headers, config) {
alert("AJAX failed to get data, status=" + status);
});
}
}
};
我的FileUploadResource.java
@Path("/upload")
@Produces(MediaType.APPLICATION_JSON)
public class FileUploadResource {
private String uploadPath;
public FileUploadResource(String uploadPath) {
this.uploadPath = uploadPath;
}
@Path("/modulusweight")
@POST
@Timed
@UnitOfWork
@Consumes(MediaType.MULTIPART_FORM_DATA)
@Produces(MediaType.APPLICATION_JSON)
public Response uploadFile(FormDataMultiPart form) {
FormDataBodyPart filePart = form.getField("modulusWeightData");
ContentDisposition headerOfFilePart = filePart.getContentDisposition();
InputStream fileInputStream = filePart.getValueAs(InputStream.class);
String filePath = uploadPath +"/"+ headerOfFilePart.getFileName();
// save the file to the server
saveFile(fileInputStream, filePath);
String output = "File saved to server location using FormDataMultiPart : " + filePath;
return Response.status(200).entity(output).build();
}
// save uploaded file to a defined location on the server
private void saveFile(InputStream uploadedInputStream, String serverLocation) {
try {
OutputStream outpuStream = new FileOutputStream(new File(
serverLocation));
int read = 0;
byte[] bytes = new byte[1024];
outpuStream = new FileOutputStream(new File(serverLocation));
while ((read = uploadedInputStream.read(bytes)) != -1) {
outpuStream.write(bytes, 0, read);
}
outpuStream.flush();
outpuStream.close();
uploadedInputStream.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
每次点击按钮都没有任何反应 但是当我使用邮递员直接发送请求时，我得到的错误就像
{
"code": 415,
"message": "HTTP 415 Unsupported Media Type"
}
这是另一个问题。我更感兴趣的是，为什么按钮点击不起作用。