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 相关文章推荐
漂亮的提示信息(带箭头)
Mar 21 Javascript
jQuery使用技巧简单汇总
Apr 18 Javascript
jQuery中index()的用法分析
Sep 05 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
Dec 03 Javascript
详解Node.js包的工程目录与NPM包管理器的使用
Feb 16 Javascript
DropDownList控件绑定数据源的三种方法
Dec 24 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
Dec 26 Javascript
EasyUI学习之DataGird分页显示数据
Dec 29 Javascript
使用JQ完成表格隔行换色的简单实例
Aug 25 Javascript
Vue框架里使用Swiper的方法示例
Sep 20 Javascript
ES6入门教程之let、const的使用方法
Apr 13 Javascript
基于Vue实现微前端的示例代码
Apr 24 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来写记数器(详细介绍)
2006/10/09 PHP
mysql建立外键
2006/11/25 PHP
PHP响应post请求上传文件的方法
2015/12/17 PHP
PHP大文件分块上传功能实例详解
2019/07/22 PHP
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
2006/09/07 Javascript
Flexigrid在IE下不显示数据的处理的解决方法
2013/10/24 Javascript
jquery中get,post和ajax方法的使用小结
2014/02/04 Javascript
js隐式全局变量造成的bug示例代码
2014/04/22 Javascript
Window.Open如何在同一个标签页打开
2014/06/20 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
2015/03/11 Javascript
js+cookies实现悬浮购物车的方法
2015/05/25 Javascript
JSON字符串转JSON对象
2015/07/31 Javascript
JavaScript中数组添加值和访问值常见问题
2016/02/06 Javascript
vue实现重置表单信息为空的方法
2018/09/29 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
2019/08/23 Javascript
Vue仿Bibibili首页的问题
2021/01/21 Vue.js
python复制文件代码实现
2013/12/23 Python
Python中集合的内建函数和内建方法学习教程
2015/08/19 Python
virtualenv 指定 python 解释器的版本方法
2018/10/25 Python
pandas分区间,算频率的实例
2019/07/04 Python
Python的PIL库中getpixel方法的使用
2020/04/09 Python
如何使用python-opencv批量生成带噪点噪线的数字验证码
2020/12/21 Python
中国跨境海淘网站:考拉海购
2016/08/01 全球购物
澳大利亚领先的运动鞋商店:Hype DC
2018/03/31 全球购物
荣耀商城:HIHONOR
2020/11/03 全球购物
甲方资料员岗位职责
2013/12/13 职场文书
硕士研究生自我鉴定范文
2013/12/27 职场文书
母亲节感恩寄语
2014/02/21 职场文书
平面设计求职信
2014/03/10 职场文书
巾帼文明岗申报材料
2014/05/01 职场文书
计算机软件专业求职信
2014/06/10 职场文书
2016预备党员培训心得体会
2016/01/08 职场文书
python 统计代码耗时的几种方法分享
2021/04/02 Python
Jupyter Notebook 如何修改字体和大小以及更改字体样式
2021/06/03 Python
OpenCV图像变换之傅里叶变换的一些应用
2021/07/26 Python
Python中的程序流程控制语句
2022/02/24 Python