AngularJS 通过 Spring Restful 上传文件
总结一下,在写下这些文字之前心里很不爽,一个小问题倒腾了这么久...
JS 端:
// 指令
app.directive('fileModel', ['$parse', function($parse) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign; element.bind('change', function() {
scope.$apply(function() {
modelSetter(scope, element[0].files[0]);
})
})
}
}
}])
// Service
app.service('fileUpload', ['$http', function($http) {
this.uploadFile = function(file, url) {
var fd = new FormData();
fd.append('name', file.name);
fd.append('file', file); $http.post(url, fd, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
})
.success(function(data, status) { })
.error(function(data, status) { })
}
}])
// Controller
app.controller('FileUploadModalCtrl', ['$scope', '$uibModalInstance', 'fileUpload', function($scope, $uibModalInstance, fileUpload) { $scope.ok = function() {
var file = $scope.modelFile;
console.log('file is ' + file); var uploadUrl = './api/file/upload';
fileUpload.uploadFile(file, uploadUrl); $uibModalInstance.close($scope.items);
};
$scope.cancel = function() {
$uibModalInstance.dismiss('cancel');
}
}]).controller('UploadCtrl', function($scope, $uibModalInstance, modelSrc, imgSrc) {
$scope.model_src = modelSrc;
$scope.img_src = imgSrc; });
<!-- HTML -->
<div class="form-group">
<label for="inputFile">File Input</label>
<input type="file" file-model="modelFile">
</div>
Spring 端
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
@RestController
@RequestMapping("file")
public class FileUploadService { @RequestMapping(method = RequestMethod.POST, value = "/upload")
public String handleFileUpload(@RequestParam("name") String name, @RequestParam("file") MultipartFile file) { // todo what you want
}
}
<!-- 这个千万别忘了,在spring配置文件里声明 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"/>
注释就不加了,下班了 :)
AngularJS 通过 Spring Restful 上传文件的更多相关文章
- Spring MVC上传文件
Spring MVC上传文件 1.Web.xml中加入 <servlet> <servlet-name>springmvc</servlet-name> <s ...
- Spring MVC 上传文件
Spring MVC上传文件需要如下步骤: 1.前台页面,form属性 method设置为post,enctype="multipart/form-data" input的typ ...
- springboot(十七):使用Spring Boot上传文件
上传文件是互联网中常常应用的场景之一,最典型的情况就是上传头像等,今天就带着带着大家做一个Spring Boot上传文件的小案例. 1.pom包配置 我们使用Spring Boot最新版本1.5.9. ...
- (转)Spring Boot(十七):使用 Spring Boot 上传文件
http://www.ityouknow.com/springboot/2018/01/12/spring-boot-upload-file.html 上传文件是互联网中常常应用的场景之一,最典型的情 ...
- Spring Boot(十七):使用Spring Boot上传文件
Spring Boot(十七):使用Spring Boot上传文件 环境:Spring Boot最新版本1.5.9.jdk使用1.8.tomcat8.0 一.pom包配置 <parent> ...
- 使用Spring Boot上传文件
原文:http://www.cnblogs.com/ityouknow/p/8298344.html 上传文件是互联网中常常应用的场景之一,最典型的情况就是上传头像等,今天就带着带着大家做一个Spri ...
- Spring MVC上传文件原理和resolveLazily说明
问题:使用Spring MVC上传大文件,发现从页面提交,到进入后台controller,时间很长.怀疑是文件上传完成后,才进入.由于在HTTP首部自定义了“Token”字段用于权限校验,Token的 ...
- Spring Boot(十七):使用 Spring Boot 上传文件
上传文件是互联网中常常应用的场景之一,最典型的情况就是上传头像等,今天就带着带着大家做一个 Spring Boot 上传文件的小案例. 1.pom 包配置 我们使用 Spring Boot 版本 ...
- Spring Boot上传文件(带进度条)
Spring Boot 上传文件(带进度条)# 配置文件 spring: freemarker: template-loader-path: classpath:/static/ ##Spring B ...
随机推荐
- 1. Server.Transfer和Response.Redirect
今天在使用ServerTransfer和Response.Redirect定位到当前页面来实现刷新页面时,发现了一些现象: 1.使用Response.Redirect刷新本页面,造成当前页面显示的数据 ...
- Python学习笔记总结(四)异常处理
1.基础 try/except/else:[else是可选的]捕捉由代码中的异常并恢复,匹配except里面的错误,并执行except中定义的代码,后继续执行程序(发生异常后,由except捕捉到异常 ...
- GO语言练习ONE
- Gradient Descent 和 Stochastic Gradient Descent(随机梯度下降法)
Gradient Descent(Batch Gradient)也就是梯度下降法是一种常用的的寻找局域最小值的方法.其主要思想就是计算当前位置的梯度,取梯度反方向并结合合适步长使其向最小值移动.通过柯 ...
- Idea使用记录--添加Problems&&解决Autowired报错could not autowire
今天在使用Idea的时候,发现Idea在整个每次找到错误代码非常不方便(Idea如果类中有错误,没有打开过类并不会提示,比如构建工程后缺少jar包问题).我想快速看到工程哪里出问题类似于eclipse ...
- iOS开发中文件的上传和下载功能的基本实现-备用
感谢大神分享 这篇文章主要介绍了iOS开发中文件的上传和下载功能的基本实现,并且下载方面讲到了大文件的多线程断点下载,需要的朋友可以参考下 文件的上传 说明:文件上传使用的时POST请求,通常把要上传 ...
- 新鲜出炉的awk代码
echo "" | igawk -f main.awk # 需求:按照多种充值方式的多种金额类型进行累加统计 # 充值方式:移动卡 ,,,100元,联通卡20,,, 电信卡 ,,, ...
- MySQL扩展
一.使用MySQL特有的函数! 1>到年底还有几天 select datediff('2014-12-31','2014-6-21');//此函数用于计算日期 ...
- 开始慢慢学习这本书了。。Python编程实战:运用设计模式、并发和程序库创建高质量程序
没办法,不到设计模式,算法组合这些,在写大一点程序的时候,总是力不从心...:( 一开始可能要花很多时间来慢慢理解吧,,这毕竟和<大话设计模式>用的C#语言有点不太一样... 书上代码是3 ...
- ECMAScript 5/6/7兼容性速查表
http://kangax.github.io/compat-table/es5/ 秒查ECMAScript在各大浏览器的兼容性,点击右上角按钮可以“在5/6/7/非标”之间切换.做JavaScrip ...