angular file upload 文件上传

上传部分

测试代码：@Testpublic 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>