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 相关文章推荐
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
Aug 14 Javascript
在jQuery中 常用的选择器介绍
Apr 16 Javascript
jquery validate在ie8下的bug解决方法
Nov 13 Javascript
JavaScript获取网页中第一个链接ID的方法
Apr 03 Javascript
jquery实现移动端点击图片查看大图特效
Sep 11 Javascript
基于Bootstrap实现图片轮播效果
May 22 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
Jul 09 Javascript
js实现带进度条提示的多视频上传功能
Dec 13 Javascript
Javascript中 toFixed四舍六入方法
Aug 21 Javascript
Vue中通过vue-router实现命名视图的问题
Apr 23 Javascript
js实现盒子滚动动画效果
Aug 09 Javascript
elementui的el-popover修改样式不生效的解决
Jun 30 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批量生成缩略图的代码
2008/07/19 PHP
ThinkPHP的URL重写问题
2014/06/22 PHP
php线性表的入栈与出栈实例分析
2015/06/12 PHP
变量在 PHP7 内部的实现(二)
2015/12/21 PHP
smarty循环嵌套用法示例分析
2016/07/19 PHP
thinkphp实现分页显示功能
2016/12/03 PHP
php转换上传word文件为PDF的方法【基于COM组件】
2019/06/10 PHP
php文件包含的几种方式总结
2019/09/19 PHP
avascript中的自执行匿名函数应用示例
2014/09/15 Javascript
JavaScript实现Iterator模式实例分析
2015/06/09 Javascript
jQuery实现html元素拖拽
2015/07/21 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
2015/07/27 Javascript
smartcrop.js智能图片裁剪库
2015/10/14 Javascript
angular2 ng2 @input和@output理解及示例
2017/10/10 Javascript
使用vue2实现购物车和地址选配功能
2018/03/29 Javascript
个人小程序接入支付解决方案
2019/05/23 Javascript
Python中的pass语句使用方法讲解
2015/05/14 Python
Python简单实现socket信息发送与监听功能示例
2018/01/03 Python
Python 比较文本相似性的方法(difflib,Levenshtein)
2018/10/15 Python
对python3中, print横向输出的方法详解
2019/01/28 Python
Python类的继承、多态及获取对象信息操作详解
2019/02/28 Python
keras tensorflow 实现在python下多进程运行
2020/02/06 Python
Python图像处理库PIL的ImageFilter模块使用介绍
2020/02/26 Python
巴西葡萄酒商店:Divvino
2020/02/22 全球购物
俄罗斯厨房产品购物网站:COOK HOUSE
2021/03/15 全球购物
Lucene推荐的分页方式是什么?
2015/12/07 面试题
村官工作鉴定评语
2014/01/27 职场文书
数控专业毕业生求职信
2014/06/12 职场文书
财政局个人年终总结
2015/03/03 职场文书
仓库统计员岗位职责
2015/04/14 职场文书
红色影片观后感
2015/06/18 职场文书
2016年寒假家长评语
2015/10/10 职场文书
spring boot项目application.properties文件存放及使用介绍
2021/06/30 Java/Android
Js类的构建与继承案例详解
2021/09/15 Javascript
Python编程根据字典列表相同键的值进行合并
2021/10/05 Python
python pandas 解析(读取、写入)CSV 文件的操作方法
2022/12/24 Python