本篇文章主要讲述的是关于angularjs的上传文件的功能,angularjs的文件怎么上传你都知道吗?angularjs是前台页面,后台使用的是什么你知道吗,现在来看这篇文章吧
使用
AngularJS
上传文件
前台是
Angular
页面后台使用
SpringBoot/SpirngMVC
上传文件
html
<p> <input id="fileUpload" type="file" /> <button ng-click="uploadFile()">上传</button></p>
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
<p> <input id="fileUpload" type="file" /> <button ng-click="ok()">上传</button><br> <input ng-model="user.username" /> <input ng-model="user.password" /> </p>
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]
后台(想看更多就到PHP中文网AngularJS开发手册中学习)
@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
使用
AngularJS
上传文件
本篇文章到这就结束了(想看更多就到PHP中文网AngularJS使用手册中学习),有问题的可以在下方留言提问。
Atas ialah kandungan terperinci AngularJS怎么上传文件?angularjs上传功能的详细介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

本篇文章继续Angular的学习,带大家了解一下Angular中的元数据和装饰器,简单了解一下他们的用法,希望对大家有所帮助!

本篇文章带大家深入了解一下angular的状态管理器NgRx,介绍一下NgRx的使用方法,希望对大家有所帮助!

angular中怎么使用monaco-editor?下面本篇文章记录下最近的一次业务中用到的 monaco-editor 在 angular 中的使用,希望对大家有所帮助!

Angular项目过大,怎么合理拆分它?下面本篇文章给大家介绍一下合理拆分Angular项目的方法,希望对大家有所帮助!

怎么自定义angular-datetime-picker格式?下面本篇文章聊聊自定义格式的方法,希望对大家有所帮助!

本篇文章给大家分享一个Angular实战,了解一下angualr 结合 ng-zorro 如何快速开发一个后台系统,希望对大家有所帮助!

Angular Route中怎么提前获取数据?下面本篇文章给大家介绍一下从 Angular Route 中提前获取数据的方法,希望对大家有所帮助!

本篇文章带大家了解一下Angular中的独立组件,看看怎么在Angular中创建一个独立组件,怎么在独立组件中导入已有的模块,希望对大家有所帮助!


Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Pelayar Peperiksaan Selamat
Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.

ZendStudio 13.5.1 Mac
Persekitaran pembangunan bersepadu PHP yang berkuasa

SublimeText3 versi Inggeris
Disyorkan: Versi Win, menyokong gesaan kod!

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual
