AngularJS上传文件的示例代码


Posted in Javascript onNovember 10, 2018

使用AngularJS上传文件

  • 前台是Angular页面
  • 后台使用SpringBoot/SpirngMVC

上传文件

html

<div>
  <input id="fileUpload" type="file" />
  <button ng-click="uploadFile()">上传</button>
</div>

js

$scope.upload = function(){
      var form = new FormData();
      var file = document.getElementById("fileUpload").files[0];
      form.append('file', file);
      $http({
        method: 'POST',
        url: '/upload',
        data: form,
        headers: {'Content-Type': undefined},
        transformRequest: angular.identity
      }).success(function (data) {
        console.log('upload success');
      }).error(function (data) {
         console.log('upload fail');
      })
    }

注意:

  • AngularJS默认的'Content-Type'是application/json ,通过设置'Content-Type': undefined,这样浏览器不仅帮我们把Content-Type 设置为 multipart/form-data,还填充上当前的boundary,
  • 如果手动设置为:'Content-Type': multipart/form-data,后台会抛出异常:the request was rejected because no multipart boundary was found
  • boundary 是随机生成的字符串,用来分隔文本的开始和结束
  • 通过设置 transformRequest: angular.identity ,anjularjs transformRequest function 将序列化我们的formdata object,也可以不添加

后台

@RequestMapping("/upload")
  public void uploadFile(@RequestParam(value = "file" , required = true) MultipartFile file) {
    //deal with file
  }

注意

文件必须通过@RequestParam注解来获取,且需指定value才能获取到

这样就完成了上传文件

上传文件的同时传递其他参数

html

<div>
    <input id="fileUpload" type="file" />
    <button ng-click="ok()">上传</button><br>
    <input ng-model="user.username" />
    <input ng-model="user.password" />
  </div>

js

$scope.ok = function () {
    var form = new FormData();
    var file = document.getElementById("fileUpload").files[0];  
    var user =JSON.stringify($scope.user);

    form.append('file', file);
    form.append('user',user);

    $http({
      method: 'POST',
      url: '/addUser',
      data: form,
      headers: {'Content-Type': undefined},
      transformRequest: angular.identity
    }).success(function (data) {
      console.log('operation success');
    }).error(function (data) {
      console.log('operation fail');
    })
  };

注意

需要将Object转为String后在附加到form上,否则会直接被转为字符串[Object,object]

后台

@RequestMapping("/upload")
  public Map<String, Object> upload(@RequestParam(value = "file") MultipartFile file, @RequestParam(value = "user", required = true) String user) {

    try (FileInputStream in = (FileInputStream) headImg.getInputStream();
       FileOutputStream out = new FileOutputStream("filePathAndName")) {

      //将Json对象解析为UserModel对象
      ObjectMapper objectMapper = new ObjectMapper();
      UserModel userModel = objectMapper.readValue(user, UserModel.class);

      //保存文件到filePathAndName
      int hasRead = 0;
      byte[] bytes = new byte[1024];
      while ((hasRead = in.read(bytes)) > 0) {
        out.write(bytes, 0, hasRead);
      }
    } catch (IOException e) {
      e.printStackTrace();
    }
  }

注意

ObjectMapper为com.fasterxml.jackson.databind.ObjectMapper

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
让任务管理器中的CPU跳舞的js代码
Nov 01 Javascript
jQuery代码优化 选择符篇
Nov 01 Javascript
jquery简单的拖动效果实现原理及示例
Jul 26 Javascript
js 上下左右键控制焦点(示例代码)
Dec 14 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
Aug 04 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
Mar 10 Javascript
使用js复制链接中的部分文字的方法
Jul 30 Javascript
学习JavaScript设计模式(单例模式)
Nov 26 Javascript
JS判断字符串变量是否含有某个字串的实现方法
Jun 03 Javascript
写给vue新手们的vue渲染页面教程
Sep 01 Javascript
JS中DOM元素的attribute与property属性示例详解
Sep 04 Javascript
vue的hash值原理也是table切换实例代码
Dec 14 Vue.js
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
Nov 10 #Javascript
优雅的在React项目中使用Redux的方法
Nov 10 #Javascript
Vue组件之单向数据流的解决方法
Nov 10 #Javascript
详解如何制作并发布一个vue的组件的npm包
Nov 10 #Javascript
如何在基于vue-cli的项目自定义打包环境
Nov 10 #Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
Nov 10 #Javascript
node+express框架中连接使用mysql(经验总结)
Nov 10 #Javascript
You might like
php中\r \r\n \t的区别示例介绍
2014/02/08 PHP
php中数据库连接方式pdo和mysqli对比分析
2015/02/25 PHP
php微信公众号js-sdk开发应用
2016/11/28 PHP
php中get_magic_quotes_gpc()函数说明
2017/02/06 PHP
PHP fprintf()函数用法讲解
2019/02/16 PHP
JS日历 推荐
2006/12/03 Javascript
slice函数的用法 之不错的应用
2006/12/29 Javascript
flash遮住div问题的正确解决方法
2014/02/27 Javascript
JS+CSS相对定位实现的下拉菜单
2015/10/06 Javascript
jQuery zclip插件实现跨浏览器复制功能
2015/11/02 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
2018/07/28 Javascript
element ui table(表格)实现点击一行展开功能
2018/12/04 Javascript
Node.js net模块功能及事件监听用法分析
2019/01/05 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
2020/05/20 Javascript
解决vue项目,npm run build后,报路径错的问题
2020/08/13 Javascript
python持久性管理pickle模块详细介绍
2015/02/18 Python
Python中如何优雅的合并两个字典(dict)方法示例
2017/08/09 Python
Python实现的桶排序算法示例
2017/11/29 Python
Python selenium实现微博自动登录的示例代码
2018/05/16 Python
python操作mysql代码总结
2018/06/01 Python
详解Django中六个常用的自定义装饰器
2018/07/04 Python
Python3基础教程之递归函数简单示例
2019/06/07 Python
Python 图像对比度增强的几种方法(小结)
2019/09/25 Python
详解Django关于StreamingHttpResponse与FileResponse文件下载的最优方法
2021/01/07 Python
CSS3 实现倒计时效果
2020/11/25 HTML / CSS
HTML5 canvas绘制的玫瑰花效果
2014/05/29 HTML / CSS
室内设计专业个人的自我评价
2013/12/18 职场文书
人事档案接收函
2014/01/12 职场文书
厂长岗位职责
2014/02/19 职场文书
工程技术员岗位职责
2014/03/02 职场文书
党的生日活动方案
2014/08/15 职场文书
辞职信的写法
2015/02/27 职场文书
2015年暑期见闻
2015/07/14 职场文书
公司年会晚会开幕词
2019/04/02 职场文书
详解如何修改nginx的默认端口
2021/03/31 Servers
前端使用svg图片改色实现示例
2022/07/23 HTML / CSS