AngularJS上传文件的示例代码

 更新时间:2018年11月10日 15:45:39   作者:呜呜呜啦啦啦  
上传文件在很多时候都能用到,这篇文章主要介绍了AngularJS上传文件的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

使用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

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

相关文章

  • Angular 2应用的8个主要构造块有哪些

    Angular 2应用的8个主要构造块有哪些

    这篇文章主要为大家详细介绍了Angular 2应用的8个主要构造块,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • AngularJS入门之动画

    AngularJS入门之动画

    AngularJS中ngAnimate模块支持动画效果,但是ngAnimate模块并未包含在AngularJS核心库中,因此需要使用ngAnimate需要在定义Module时声明对其的引用。下面通过本文我们来看看AngularJS动画的详细介绍。
    2016-07-07
  • AngularJS使用ng-app自动加载bootstrap框架问题分析

    AngularJS使用ng-app自动加载bootstrap框架问题分析

    这篇文章主要介绍了AngularJS使用ng-app自动加载bootstrap框架问题,分析了前面文章中所述的ng-app自动加载bootstrap出现的错误原因与相应的解决方法,需要的朋友可以参考下
    2017-01-01
  • 详解angular2如何手动点击特定元素上的点击事件

    详解angular2如何手动点击特定元素上的点击事件

    这篇文章主要介绍了详解angular2如何手动点击特定元素上的点击事件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • Angular利用trackBy提升性能的方法

    Angular利用trackBy提升性能的方法

    这篇文章主要介绍了在Angular中利用trackBy来提升性能的实现方法,需要的朋友可以参考下
    2018-01-01
  • AngularJS中的按需加载ocLazyLoad示例

    AngularJS中的按需加载ocLazyLoad示例

    本篇文章主要介绍了AngularJS中的按需加载ocLazyLoad,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-01-01
  • 实例详解AngularJS实现无限级联动菜单

    实例详解AngularJS实现无限级联动菜单

    这篇文章主要介绍了实例详解AngularJS实现无限级联动菜单的相关资料,需要的朋友可以参考下
    2016-01-01
  • Angular4.0动画操作实例详解

    Angular4.0动画操作实例详解

    这篇文章主要介绍了Angular4.0动画操作,结合实例形式详细分析了Angular4.0动画的原理、定义及使用等相关操作技巧,需要的朋友可以参考下
    2019-05-05
  • angular实现form验证实例代码

    angular实现form验证实例代码

    本篇文章主要介绍了angular实现form验证实例代码,具有一定的参考价值,有兴趣的可以了解一下。
    2017-01-01
  • angular实现IM聊天图片发送实例

    angular实现IM聊天图片发送实例

    本篇文章主要介绍了angular实现IM聊天图片发送实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05

最新评论