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 ...
随机推荐
- Markdown简短教程
前言 很早以前就已经接触到Markdown语言,由于各种原因到今天才认真的学习.其实Markdown语言还是比较简单的,在用中学就可以了. 正文 本文只是介绍而没有说明其它可选语法,详细可以参考[Ma ...
- QT 串口通信 数据16进制发送
在QT中进行串口通信时,很多情况要用到发送16进制的数据.从网上找来了一段代码测试能用: static QByteArray QString2Hex(QString str) { QByteArray ...
- 关于炒股软件——金魔方炒股软件的Dll外挂开发
2015-01-19 14:40:04 金魔方平台是由飞狐交易师原创团队集多年研发经验,依靠和讯财经网强大资源,吸取国际专家思路而推出的十年巨作.目前新出的这个2.0版,这一版在数据存储方面作很大的改 ...
- DatePickerDialog 控制只选择年月或年或月
etXyLevelDate.setOnTouchListener(selectDateTouchListener()); /** * @desc 选择日期操作 * @param @return * @ ...
- ulimit -t 引起的kill血案
http://my.oschina.net/leejun2005/blog/80975 http://www.cnblogs.com/hazir/p/systemtap_introduction.ht ...
- Manacher马拉车
俗话说:摩托再好,不如骡拉啊(好像不是骡) Manacher就是O(N)计算最长回文子串的算法. 其中我们需要在0位置加入字符“$",然后原字符串中每两个字符加入一个"#" ...
- 查询Sqlserver 表结构信息 SQL
SELECT 表名 then d.name else '' end, 表说明 then isnull(f.value,'') else '' end, 字段序号 = a.colorder, 字段名 = ...
- Logstash 介绍
Logstash 介绍: Logstash 是一个开源的数据收集引擎具有实时管道能力, Logstash 可以动态的统一数据从不同的来源和使数据规范化到你选择的目的地. 当Logstash 起初驾驭创 ...
- Delphi TcxTreeListColumn 的 ImageComboBox 用法
1.设置图片如下: 设置默认值: if Trim(FQuery.fieldByName('cPersonCategory').AsString) = '' then begin CNode.Value ...
- UVA11456--dp,LIS
这道题是个不错的dp题,可以放在区域赛签到题或者铜牌题. 这题希望火车序列最长,我们可以想到,如果一辆车ai如果能被放上去,先不管之前放上了多少辆车,以及这辆车是什么时候放上去的,但是我们可以确定的是 ...