我使用Spring Boot和Angular JS上传文件。我的Java控制器返回文件的一些细节,例如日期,类型,表单的输入,它们是上传者的名称和文件。
因此,当我点击import Report
时,我可以上传文件,但我没有将详细信息添加到表格中。我有一个空行。
那么我做错了什么?
这是我的表格:
<section id="contact-info">
<section id="contact-page">
<div class="container">
<div class="center">
<p class="lead">Import reports</p>
</div>
<div class="row contact-wrap">
<div class="status alert alert-success" style="display: none"></div>
<form id="main-contact-form" class="contact-form" name="contact-form" method="POST" enctype="multipart/form-data" >
<div class="col-sm-5 col-sm-offset-1">
<div class="form-group">
<label>name *</label>
<input type="text" name="NameOfUploader" class="form-control" required="required" ng-model="r.NameOfUploader">
</div>
<div class="form-group">
<label>file</label>
<input type="file" name="file" class="form-control" fileread="r.file">
</div>
我的控制器java
public class DRController {
@Autowired
private DetailsReportRepository detailsReportRepository;
@RequestMapping(value="/upload",headers=("content-type=multipart/*"),consumes = {"multipart/form-data"}, method=RequestMethod.POST)
public @ResponseBody String handleFileUpload(@RequestParam("NameOfUploader") String NameOfUploader,@RequestParam("file") MultipartFile file){
if (!file.isEmpty()) {
try {
DetailsReport d2=new DetailsReport();
d2.setNameOfUploader(NameOfUploader);
d2.setTypeOfFile(file.getContentType());
d2.setDateOfUpload(new Date(new java.util.Date().getTime()));
d2.setFile(convert(file));
detailsReportRepository.save(d2);
byte[] bytes = file.getBytes();
BufferedOutputStream stream =
new BufferedOutputStream(new FileOutputStream(new File("F:/FilesStore/" + d2.getId_file()+"-"+d2.getNameOfUploader())));
stream.write(bytes);
stream.close();
return d2.toString();
} catch (Exception e) {
System.err.print("erreur");
}
}
return null;
}
public File convert(MultipartFile file)
{
File convFile = new File(file.getOriginalFilename());
try {
convFile.createNewFile();
FileOutputStream fos = new FileOutputStream(convFile);
fos.write(file.getBytes());
fos.close();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return convFile;
}
}
我的控制器js
//Upload files
$scope.upload = function() {
var fd = new FormData();
var url='http://localhost:8080/upload';
fd.append("file", $scope.r.file);
fd.append("NameOfUploader",$scope.r.NameOfUploader);
$http.post(url,fd,{
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
})
.success(function(data){
var b=JSON.parse(data);
$scope.reports.push(b);
console.log(Json.parse(data));
console.log($scope.reports);
})
.error(function(){
});
}
<div class="form-group">
<a class="btn btn-primary btn-lg" ng-click="upload()">Import File</a>
</div>
<table class="table">
<tr>
<th>Id_file</th>
<th>NameOfUploader</th>
<th>DateOfUpload</th>
<th>TypeOfFile</th>
<th>File</th>
</tr>
<tr ng-repeat="r in reports">
<td></td>
<td>{{r.NameOfUploader}}</td>
<td>{{r.DateOfUpload}}</td>
<td>{{r.TypeOfFile}}</td>
<td>{{r.file}}</td>
</tr>
</table>
</div>
这就是我所拥有的:
答案 0 :(得分:1)
您只需更改属性的大写
即可<tr ng-repeat="r in reports">
<td></td>
<td>{{r.nameOfUploader}}</td>
<td>{{r.dateOfUpload}}</td>
<td>{{r.typeOfFile}}</td>
<td>{{r.file}}</td>
</tr>