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 相关文章推荐
cssQuery()的下载与使用方法
Jan 12 Javascript
cookie的复制与使用记住用户名实现代码
Nov 04 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
Mar 26 Javascript
原生js和jQuery随意改变div属性style的名称和值
Oct 22 Javascript
JavaScript将一个数组插入到另一个数组的方法
Mar 19 Javascript
四种参数传递的形式——URL,超链接,js,form表单
Jul 24 Javascript
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
Nov 26 Javascript
JavaScript的instanceof运算符学习教程
Jun 08 Javascript
react.js CMS 删除功能的实现方法
Apr 17 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
微信小程序新手教程之页面打开数量限制
Mar 03 Javascript
html+vue.js 实现漂亮分页功能可兼容IE
Nov 07 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
锁定年轻人的双倍活力 星巴克推出星倍醇即饮浓咖啡
2021/03/03 咖啡文化
PHP初学入门
2006/11/19 PHP
is_uploaded_file函数引发的不能上传文件问题
2013/10/29 PHP
PHP简单获取网站百度搜索和搜狗搜索收录量的方法
2016/08/23 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
php实现的mongoDB单例模式操作类
2018/01/20 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
img的onload的另类用法
2008/01/10 Javascript
JavaScript计时器示例分析
2015/02/05 Javascript
Nodejs如何复制文件
2016/03/09 NodeJs
AngularJS入门教程引导程序
2016/08/18 Javascript
Vue.js第四天学习笔记
2016/12/02 Javascript
微信小程序 picker-view 组件详解及简单实例
2017/01/10 Javascript
js实现手机发送验证码功能
2017/03/13 Javascript
vue实现表格数据的增删改查
2017/07/10 Javascript
一次Webpack配置文件的分离实战记录
2018/11/30 Javascript
微信小程序 WXML节点信息查询详解
2019/07/29 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
2019/08/08 Javascript
在vue中使用echars实现上浮与下钻效果
2019/11/08 Javascript
three.js利用射线Raycaster进行碰撞检测
2020/03/12 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
2020/08/04 Javascript
利用matplotlib+numpy绘制多种绘图的方法实例
2017/05/03 Python
分享一个可以生成各种进制格式IP的小工具实例代码
2017/07/28 Python
Python字符串格式化的方法(两种)
2017/09/19 Python
python入门:这篇文章带你直接学会python
2018/09/14 Python
Python 面向对象部分知识点小结
2020/03/09 Python
在Django中自定义filter并在template中的使用详解
2020/05/19 Python
python爬取网易云音乐热歌榜实例代码
2020/08/07 Python
美国宠物护理专家:Revival Animal Health
2020/01/05 全球购物
Tea Collection官网:一家位于旧金山的童装公司
2020/08/07 全球购物
保安公司服务承诺书
2014/05/28 职场文书
黄山导游词
2015/01/31 职场文书
学生会生活部工作总结2015
2015/03/31 职场文书
教师正风肃纪心得体会
2016/01/15 职场文书
CocosCreator入门教程之网络通信
2021/04/16 Javascript
Python中Cookies导出某站用户数据的方法
2021/05/17 Python