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 ...
随机推荐
- math.h中的常量
类似于Matlab中经常用到的一些常量,C++里边也是有的.(经查源文件无意中看到) 写入如下代码: #include<iostream> #include<iomanip> ...
- C语言基础学习学习前的准备-1
C语言概述 欢迎来到C的世界!C语言之所以命名为C,是因为C语言源自Ken Thompson发明的B语言.它是一种可移植语言,通常一个C程序可以经过很少的改动甚至不经改动就可以在其它系统上运行:它强大 ...
- Eclipse formater(google Java 编码规范)
1. 谷歌Java编码规范 http://google-styleguide.googlecode.com/svn/trunk/javaguide.html 2. 下载配置文件: https://co ...
- FJ省队集训DAY4 T3
#include<cstdio> #include<iostream> #include<cmath> #include<cstring> #inclu ...
- IComparer<T> 接口Linq比较接口
IComparer<T>比较两个对象并返回一个值,指示一个对象是小于.等于还是大于另一个对象. 在Linq当中,很多扩展方法接受一个实现IComparer<T>接口的实例的对象 ...
- usaco silver
大神们都在刷usaco,我也来水一水 1606: [Usaco2008 Dec]Hay For Sale 购买干草 裸背包 1607: [Usaco2008 Dec]Patting Heads 轻 ...
- Codeforce 216 div2
D 只要搞清楚一个性质:确定了当前最大和次大的位置,局面就唯一确定了; 根据这个性质设计dp,统计到达该局面的方法数即可. E 询问的要求是: 求有多少个区间至少覆盖了询问的点集中的一个; 转化成逆命 ...
- struts的ognl.NoConversionPossible错误
JSP页面便利集合的时候,代码如下 <s:iterator value="storageList" id="stList" status="st ...
- MySQL精粹
关于Mysql整理的需要记忆和熟练掌握的内容 1.查询数据表的信息(比如有多少行数据): show table status like 'tab_User' -- 数据表中的数量 2. 使用 ex ...
- (转)Android中截取当前屏幕图片
该篇文章是说明在Android手机或平板电脑中如何实现截取当前屏幕的功能,并把截取的屏幕保存到SDCard中的某个目录文件夹下面.实现的代码如下: /** * 获取和保存当前屏幕的截图 */ priv ...