经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » AngularJS » 查看文章
AngularJS上传文件的示例代码
来源:jb51  时间:2018/11/12 10:07:14  对本文有异议

使用AngularJS上传文件

  • 前台是Angular页面
  • 后台使用SpringBoot/SpirngMVC

上传文件

html

  1. <div>
  2. <input id="fileUpload" type="file" />
  3. <button ng-click="uploadFile()">上传</button>
  4. </div>

js

  1. $scope.upload = function(){
  2. var form = new FormData();
  3. var file = document.getElementById("fileUpload").files[0];
  4. form.append('file', file);
  5. $http({
  6. method: 'POST',
  7. url: '/upload',
  8. data: form,
  9. headers: {'Content-Type': undefined},
  10. transformRequest: angular.identity
  11. }).success(function (data) {
  12. console.log('upload success');
  13. }).error(function (data) {
  14. console.log('upload fail');
  15. })
  16. }

注意:

  • 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,也可以不添加

后台

  1. @RequestMapping("/upload")
  2. public void uploadFile(@RequestParam(value = "file" , required = true) MultipartFile file) {
  3. //deal with file
  4. }

注意

文件必须通过@RequestParam注解来获取,且需指定value才能获取到

这样就完成了上传文件

上传文件的同时传递其他参数

html

  1. <div>
  2. <input id="fileUpload" type="file" />
  3. <button ng-click="ok()">上传</button><br>
  4. <input ng-model="user.username" />
  5. <input ng-model="user.password" />
  6. </div>

js

  1. $scope.ok = function () {
  2. var form = new FormData();
  3. var file = document.getElementById("fileUpload").files[0];
  4. var user =JSON.stringify($scope.user);
  5.  
  6. form.append('file', file);
  7. form.append('user',user);
  8.  
  9. $http({
  10. method: 'POST',
  11. url: '/addUser',
  12. data: form,
  13. headers: {'Content-Type': undefined},
  14. transformRequest: angular.identity
  15. }).success(function (data) {
  16. console.log('operation success');
  17. }).error(function (data) {
  18. console.log('operation fail');
  19. })
  20. };

注意

需要将Object转为String后在附加到form上,否则会直接被转为字符串[Object,object]

后台

  1. @RequestMapping("/upload")
  2. public Map<String, Object> upload(@RequestParam(value = "file") MultipartFile file, @RequestParam(value = "user", required = true) String user) {
  3.  
  4. try (FileInputStream in = (FileInputStream) headImg.getInputStream();
  5. FileOutputStream out = new FileOutputStream("filePathAndName")) {
  6.  
  7. //将Json对象解析为UserModel对象
  8. ObjectMapper objectMapper = new ObjectMapper();
  9. UserModel userModel = objectMapper.readValue(user, UserModel.class);
  10.  
  11. //保存文件到filePathAndName
  12. int hasRead = 0;
  13. byte[] bytes = new byte[1024];
  14. while ((hasRead = in.read(bytes)) > 0) {
  15. out.write(bytes, 0, hasRead);
  16. }
  17. } catch (IOException e) {
  18. e.printStackTrace();
  19. }
  20. }
  21.  

注意

ObjectMapper为com.fasterxml.jackson.databind.ObjectMapper

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

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号