文档章节

angularjs与springmvc文件上传

o
 osc_mervd488
发布于 2018/04/20 23:13
字数 625
阅读 0
收藏 0

AngularJs实现Multipart/form-data 文件的上传


https://blog.csdn.net/wei389083222/article/details/51289704


AngularJs实现Multipart/form-data 文件的上传

由于公司的需要,我们从java后台传统的JSP转向了使用前后台完全分离的模式来进行开发。后台完全提供接口,可供网页PC端和移动app端调取来获取数据。前台使用anjularjs来展示数据。

废话不多说了,直接进入主题吧。

一. 传统的表单提交文件是这样的 
前台:

    <from action="your url" method="post"         enctype="multipart/form-data">
    <input type="file" name="logo">
    <input type="submit" value="提交">
    </from>
  • 1
  • 2
  • 3
  • 4

后台springmvc的接受:

 @ApiOperation(value = "上传文件", notes = "上传文件test", responseClass = "DataVo")
    @RequestMapping(value = "/upload", produces = { "application/json" }, method =RequestMethod.POST )
    public @ResponseBody DataVo upload(
    @ApiParam(value = "logo", required = true) @RequestParam(value = "logo", required = true) MultipartFile logo,HttpServletRequest request){
    //这里的logo就是接受的文件了
    if(logo!=null){
       //进行操作吧
        System.out.println(logo.getOriginalFilename());
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

二. anjularjs的处理文件上传 
前台:

<div  ng-controller="UploaderController" >
    <input type="file" file-model="myFile" >
    <button ng-click="save()" >保存</button>
</div>
  • 1
  • 2
  • 3
  • 4

js文件: 
这里要注意的是,因为是通过anjularjs的http请求来上传文件的,所以要让当前的request成为一个Multipart/form-data请求,anjularjs对于post和get请求默认的Content-Type header 是application/json。通过设置‘Content-Type’: undefined,这样浏览器不仅帮我们把Content-Type 设置为 multipart/form-data,还填充上当前的boundary,如果你手动设置为: ‘Content-Type’: multipart/form-data,后台会抛出异常:the current request boundary parameter is null。 
ps: 
通过设置 transformRequest: angular.identity ,anjularjs transformRequest function 将序列化我们的formdata object.

 $scope.save = function() {    
        var fd = new FormData();
        var file = document.querySelector('input[type=file]').files[0];
        fd.append('logo', file); 
         $http({
              method:'POST',
              url:"your url",
              data: fd,
              headers: {'Content-Type':undefined},
              transformRequest: angular.identity 
               })   
              .success( function ( response )
                       {
                       //上传成功的操作
                       alert("uplaod success");
                       }); 

     }
    });
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

后台:同1中的后台

ps:上面的file的获取还可以通过:var file = $scope.myFile.同时要注意在js中 data: fd,不能像普通的参数一样写为:params:{ fd,…},具体的解释是: 
官方文档

params – {Object.<string|Object>} – Map of strings or objects which will be serialized with theparamSerializer and appended as GET parameters.
data – {string|Object} – Data to be sent as the request message data.
  • 1
  • 2

在GET方法中可以使用params ,在POST/PUT/PATCH/DELETE中不能使用params 来传递数据,要使用data来传递。

三.小结 
这样就实现了简单的anjularjs文件的上传,自己总结了一下,希望可以帮助到大家,加油!


o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

OSChina 周五乱弹 —— 你大妈还是你大妈

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @watergood:是时候分享一波我的这张纯音乐歌单了,过去的五年多时间里,我陆陆续续地把听到的好听的纯音乐添加了进去,目前一共65首,相信总...

小小编辑
今天
25
0
在Objective-C中生成随机数 - Generating random numbers in Objective-C

问题: I'm a Java head mainly, and I want a way to generate a pseudo-random number between 0 and 74. In Java I would use the method: 我主要是Java头,我想要一种生成0到74之间的伪随......

技术盛宴
今天
13
0
ftp-ftps-sftp的关系

Ftp FTP 是File Transfer Protocol(文件传输协议)的英文简称,而中文简称为“文传协议”。用于Internet上的控制文件的双向传输。同时,它也是一个应用程序(Application)。基于不同的操作...

独钓渔
今天
12
0
使Vim将所有空格显示为字符 - Make Vim show ALL white spaces as a character

问题: I can't find a way to make Vim show all white spaces as a character. 我找不到让Vim将所有空白显示为字符的方法。 All I found was about tabs, trailing spaces etc. 我发现的只......

富含淀粉
今天
23
0
RN 接入高德地图遇到的一些问题

react-native-amap-geolocation、react-native-amap3d 1、iOS Geolocation.getCurrentPosition 获取坐标后,没有返回 address 信息? 逆地理编码 Android 默认返回逆地理编码,而 iOS 需要手...

Jack088
今天
14
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部