angular file upload 文件上传

上传部分

测试代码:
@Test
public void testFileUpload() throws IOException {
//假设路径和文件
UploadController uc = new UploadController();
String name = "n";
String originalFilename = "a.pdf";
String contentType = "pdf";
byte[] content = new byte[1];
MockMultipartFile1 documentService = new MockMultipartFile1();
uc.setDocumentService(documentService);
MockMultipartFile dc = new MockMultipartFile(name, originalFilename,
contentType, content);
Company co = new Company();
co.setId(2);
Department de = new Department();
de.setName("general");
Station st = new Station();
st.setId(1);
DocumentType docT = new DocumentType();
docT.setName("license");
Document doc = new Document();
doc.setDepartment(de);
doc.setStation(st);
doc.setDocumentType(docT);
doc.setName("许可证");
DocumentVersion dv = new DocumentVersion();
dv.setNumber("1");
dv.setDocument(doc);
uc.fileUpload(co, dv, dc);
//验证路径是否正确
assertEquals("companies/2/general/1/license/许可证/1.pdf",
documentService.path);
}


后台代码:
@RequestMapping(value = "/{versionId}.pdf", method = RequestMethod.POST)
public void fileUpload(@PathVariable("companyId") Company company,
@PathVariable("versionId") DocumentVersion version,
@RequestParam MultipartFile file) throws IOException {
//获取文件流
version.getDocument().setCompany(company);
String extension = file.getOriginalFilename().substring(
file.getOriginalFilename().lastIndexOf("."));// 取文件格式后缀名
InputStream input = file.getInputStream(); 
//保存文件
documentPersistenceService.saveDocumentFile(version, extension, input);
}



angularjs代码:
.factory('fileUpload', function ($routeParams,FileUploader, csrf, $q) {
return function ($scope) {
return {
//上传文件前对文件格式处理
   beforeUpload: function(){
  $scope.uploader = new FileUploader({
  headers: {
' X-CSRF-TOKEN': csrf.token
}
});
$scope.uploader.filters.push({
name: 'customFilter',
fn: function (item, options) {
var type = '|' + item.type.slice(item.type.lastIndexOf('/') + 1) + '|';
return '|pdf|'.indexOf(type) !== -1;
}
});
$scope.uploader.onWhenAddingFileFailed = function (item, filter, options) {
alert("请选择pdf文件!");
console.info('onWhenAddingFileFailed', item, filter, options);
};
},

//直接通过路径上传文件
upload: function (url) {
for (var i = 0; i < $scope.uploader.queue.length; i++) {
$scope.uploader.queue[i].url = url;
}
$scope.uploader.uploadAll();
var uploader = $scope.uploader;
uploader.onErrorItem = function (fileItem, response, status,
headers) {
alert("文件过大,或者网络中断了!")
console.info('onErrorItem', fileItem, response, status, headers);
};


uploader.onWhenAddingFileFailed = function (item /* {File|FileLikeObject} */, filter, options) {
alert("请选择pdf文件!");
console.info('onWhenAddingFileFailed', item, filter, options);
};


uploader.onSuccessItem = function (fileItem, response, status, headers) {
console.info('onSuccessItem', fileItem, response, status, headers);
$scope.back(2);
};
uploader.onErrorItem = function (fileItem, response, status, headers) {
alert("网络中断或者文件数据过大")
console.info('onErrorItem', fileItem, response, status, headers);
};
uploader.onCancelItem = function (fileItem, response, status, headers) {

console.info('onCancelItem', fileItem, response, status, headers);
};
   uploader.onCompleteItem = function(fileItem, response, status, headers) {
           console.info('onCompleteItem', fileItem, response, status, headers);
       };
       uploader.onCompleteAll = function() {
           console.info('onCompleteAll');
       };
      if(uploader.queue.length==0){
      $scope.back(2);
      }
},
//通过文件id来上传文件
uploadById: function (id) {
var defer = $q.defer()
this.upload('companies/' + $routeParams.company_id + '/documents/versions/'
+ id +'.pdf');
return defer.promise

}
};
}
})


页面代码:
<section>
<div filters="queueLimit, customFilter">
<div class="container">
</div>
<div class="col-md-6">
//文件上传
<input type="file" nv-file-select="" uploader="uploader"/>
</div>
<div class="col-md-12" style="margin-bottom: 40px">
<table class="table">
<thead>
<tr>
<th width="50%">文件名</th>
<th ng-show="uploader.isHTML5">大小</th>
<th>Status</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in uploader.queue">
<td><strong>{{ item.file.name }}</strong>


<div ng-show="uploader.isHTML5"
ng-thumb="{ file: item._file, height: 100 }"></div>
</td>
<td ng-show="uploader.isHTML5" nowrap>{{
item.file.size/1024/1024|number:2 }} MB
</td>
<td nowrap>
<button type="button" class="btn btn-warning btn-xs"
ng-click="item.cancel()" ng-disabled="!item.isUploading">
<span class="glyphicon glyphicon-ban-circle"></span> 取消
</button>
<button type="button" class="btn btn-danger btn-xs"
ng-click="item.remove()">
<span class="glyphicon glyphicon-trash"></span> 移除
</button>
</td>
</tr>
</tbody>
</table>
<div>
Queue progress:
<div class="progress" style="">
<div class="progress-bar" role="progressbar"
ng-style="{ 'width': uploader.progress + '%' }"></div>
</div>
</div>
</div>
</div>
</section>


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值