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 相关文章推荐
扩展jquery实现客户端表格的分页、排序功能代码
Mar 16 Javascript
JS Date函数整理方便使用
Oct 23 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
Oct 23 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
Oct 23 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
Sep 05 Javascript
JavaScript学习笔记之惰性函数示例详解
Aug 27 Javascript
Vue前端开发规范整理(推荐)
Apr 23 Javascript
微信小程序实现默认第一个选中变色效果
Jul 17 Javascript
详解如何在vue-cli中使用vuex
Aug 07 Javascript
浅谈layui里的上传控件问题
Sep 26 Javascript
Vue微信公众号网页分享的示例代码
May 28 Javascript
JavaScript实现手风琴效果
Feb 18 Javascript
详解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 HTTP 认证实例详解
2016/11/03 PHP
tp5框架无刷新分页实现方法分析
2019/09/26 PHP
PHP的imageTtfText()函数深入详解
2021/03/03 PHP
ExtJs GridPanel简单的增删改实现代码
2010/08/26 Javascript
中文路径导致unitpngfix.js不正常的解决方法
2013/06/26 Javascript
javascript闭包的高级使用方法实例
2013/07/04 Javascript
了解了这些才能开始发挥jQuery的威力
2013/10/10 Javascript
jquery实现图片按比例缩放示例
2014/07/01 Javascript
javascript实现按回车键切换焦点
2015/02/09 Javascript
JavaScript运动减速效果实例分析
2015/08/04 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
2015/10/08 Javascript
Bootstrap每天必学之滚动监听
2016/03/16 Javascript
JavaScript驾驭网页-CSS与DOM
2016/03/24 Javascript
Angular2  NgModule 模块详解
2016/10/19 Javascript
Vue2.x中的Render函数详解
2017/05/30 Javascript
jQuery Jsonp跨域模拟搜索引擎
2017/06/17 jQuery
vue检测对象和数组的变化分析
2018/06/30 Javascript
浅谈Vue组件及组件的注册方法
2018/08/24 Javascript
jquery实现有过渡效果的tab切换
2020/07/17 jQuery
python循环监控远程端口的方法
2015/03/14 Python
Python封装shell命令实例分析
2015/05/05 Python
Atom的python插件和常用插件说明
2018/07/08 Python
python找出完数的方法
2018/11/12 Python
PyTorch搭建多项式回归模型(三)
2019/05/22 Python
kali中python版本的切换方法
2019/07/11 Python
Django框架model模型对象验证实现方法分析
2019/10/02 Python
css3学习之2D转换功能详解
2016/12/23 HTML / CSS
Omio中国:全欧洲低价大巴、火车和航班搜索和比价
2018/08/09 全球购物
Exoticca英国:以最优惠的价格提供豪华异国情调旅行
2018/10/18 全球购物
培训班开班仪式主持词
2014/03/28 职场文书
户籍证明书标准模板
2014/09/10 职场文书
出生医学证明书
2014/09/15 职场文书
高考升学宴答谢词
2015/01/20 职场文书
2016中秋节广告语
2016/01/28 职场文书
利用python进行数据加载
2021/06/20 Python
《仙剑客栈2》第一弹正式宣传片公开 年内发售
2022/04/07 其他游戏