AngularJS上传文件的示例代码
使用AngularJS上传文件
- 前台是Angular页面
- 后台使用SpringBoot/SpirngMVC
上传文件
html
上传
js
$scope.upload=function(){ varform=newFormData(); varfile=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('uploadsuccess'); }).error(function(data){ console.log('uploadfail'); }) }
注意:
- AngularJS默认的'Content-Type'是application/json,通过设置'Content-Type':undefined,这样浏览器不仅帮我们把Content-Type设置为multipart/form-data,还填充上当前的boundary,
- 如果手动设置为:'Content-Type':multipart/form-data,后台会抛出异常:therequestwasrejectedbecausenomultipartboundarywasfound
- boundary是随机生成的字符串,用来分隔文本的开始和结束
- 通过设置transformRequest:angular.identity,anjularjstransformRequestfunction将序列化我们的formdataobject,也可以不添加
后台
@RequestMapping("/upload") publicvoiduploadFile(@RequestParam(value="file",required=true)MultipartFilefile){ //dealwithfile }
注意
文件必须通过@RequestParam注解来获取,且需指定value才能获取到
这样就完成了上传文件
上传文件的同时传递其他参数
html
上传
js
$scope.ok=function(){ varform=newFormData(); varfile=document.getElementById("fileUpload").files[0]; varuser=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('operationsuccess'); }).error(function(data){ console.log('operationfail'); }) };
注意
需要将Object转为String后在附加到form上,否则会直接被转为字符串[Object,object]
后台
@RequestMapping("/upload") publicMapupload(@RequestParam(value="file")MultipartFilefile,@RequestParam(value="user",required=true)Stringuser){ try(FileInputStreamin=(FileInputStream)headImg.getInputStream(); FileOutputStreamout=newFileOutputStream("filePathAndName")){ //将Json对象解析为UserModel对象 ObjectMapperobjectMapper=newObjectMapper(); UserModeluserModel=objectMapper.readValue(user,UserModel.class); //保存文件到filePathAndName inthasRead=0; byte[]bytes=newbyte[1024]; while((hasRead=in.read(bytes))>0){ out.write(bytes,0,hasRead); } }catch(IOExceptione){ e.printStackTrace(); } }
注意
ObjectMapper为com.fasterxml.jackson.databind.ObjectMapper
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。