angular-file-upload+springMVC的使用
发布时间：2020-12-17 09:06:20 所属栏目：安全 来源：网络整理
导读：最近项目中需要用到文件上传，使用了angular-file-upload插件完成 首先来介绍下这个插件的一些属性（参考官方文档） FileUploader 属性 url {String} : 上传文件的服务器路径 alias {String} : 包含文件的名称，默认是file queue {Array} : 上传队列 progres
|
最近项目中需要用到文件上传，使用了angular-file-upload插件完成 首先来介绍下这个插件的一些属性（参考官方文档） FileUploader属性
方法
回调函数
使用当然首先需要加入插件的js bower bower install angular-file-upload <script src="bower_components/angular-file-upload/dist/angular-file-upload.min.js"></script> 在页面导入js 加入angularFileUpload var myapp = angular.module('add',['angularFileUpload'])
html我这里是上传的图片所以代码如下： <div ng-controller="addProduct"> <div> <lable>产品名称</lable> <input type="text" ng-model="productInfo.name"> </div> <div> <lable>产品型号</lable> <input type="text" ng-model="productInfo.type"> </div> <div> <lable>产品图片</lable> <input type="file" name="photo" nv-file-select="" uploader="uploader" accept="image/*" ngf-max-size="2MB" ngf-model-invalid="errorFile" /></div> <div><button class="btn btn-info" ng-click="addProduct()"></div> </div> 这个是最简单的使用主要是uploader这个属性，其他的accept、ngf-max-size、ngf-model-invalid都是一些限制图片的属性 Jsmyapp.controller('addProduct',['$scope','$http','FileUploader',function($scope,$http,FileUploader){
//在外围定义一个数组，赋值给formData,通过改变此数组，实现数据的改变
var productInfo=[];
var uploader = $scope.uploader = new FileUploader({
url: 'add',formData:productInfo
});
uploader.onSuccessItem = function(fileItem,headers) {
alert(response);
};
$scope.addProduct = function() {
uploader.uploadAll();
}
// FILTERS
uploader.filters.push({
name: 'customFilter',fn: function(item /*{File|FileLikeObject}*/,options) {
return this.queue.length < 10;
}
});
// CALLBACKS
uploader.onWhenAddingFileFailed = function(item /*{File|FileLikeObject}*/,options) {
console.info('onWhenAddingFileFailed',item,options);
};
uploader.onAfterAddingFile = function(fileItem) {
console.info('onAfterAddingFile',fileItem);
};
uploader.onAfterAddingAll = function(addedFileItems) {
console.info('onAfterAddingAll',addedFileItems);
};
uploader.onBeforeUploadItem = function(item) {
console.info('onBeforeUploadItem',item);
};
uploader.onProgressItem = function(fileItem,progress) {
console.info('onProgressItem',fileItem,progress);
};
uploader.onProgressAll = function(progress) {
console.info('onProgressAll',progress);
};
uploader.onSuccessItem = function(fileItem,headers) {
console.info('onSuccessItem',headers);
};
uploader.onErrorItem = function(fileItem,headers) {
console.info('onErrorItem',headers);
};
uploader.onCancelItem = function(fileItem,headers) {
console.info('onCancelItem',headers);
};
uploader.onCompleteItem = function(fileItem,headers) {
console.info('onCompleteItem',headers);
};
uploader.onCompleteAll = function() {
console.info('onCompleteAll');
};
console.info('uploader',uploader);
}])
java@RequestMapping(value="add",method = RequestMethod.POST)
public ResponseEntity<Object> addProduct(@RequestParam("file") MultipartFile uploadFiles,ProductVo productVo){
String fileName=uploadFile.getOriginalFilename();
String prefix="."+fileName.substring(fileName.lastIndexOf(".")+1);
File dst=null;
try {
String root = System.getProperty("catalina.base"); //获取tomcat根路径
File uploadDir = new File(root,"webapps/upload"); //创建一个指向tomcat/webapps/upload目录的对象
if (!uploadDir.exists()) {
uploadDir.mkdir(); //如果不存在则创建upload目录
}
dst = new File(uploadDir,UUID.randomUUID().toString()+prefix); //创建一个指向upload目录下的文件对象，文件名随机生成
uploadFile.transferTo(dst); //创建文件并将上传文件复制过去
} catch (Exception e) {
e.printStackTrace();
}
//然后把路径set到productVo中 完成添加 "/upload/"+dst.getName();
}
如此就完成了。 主要问题在Js中给formData赋值 因为formData的new生成的所以 就是固定不变的，如果直接写formData：[$scope.prodctInfo]，就会导致formData没有值，后台就获取不到其他数据了。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |