axios实现简单文件上传功能
本文实例为大家分享了axios实现文件上传功能的具体代码,供大家参考,具体内容如下
前台页面:
引入axiosjs文件
HTML:
上传图片
JS:
functionupload(){ alert("上传") letfile=document.getElementsByName('img')[0].files[0]; letformData=newFormData(); formData.append("uploadFile",file,file.name); constconfig={ headers:{"Content-Type":"multipart/form-data;boundary="+newDate().getTime()} }; axios .post("/file/upload",formData,config) .then(function(response){ console.log(response); }) .catch(function(error){ console.log(error); }); }
后台接收:
@PostMapping(value="/upload") publicStringupload(HttpServletRequestrequest){ logger.info("开始上传……"); MultipartHttpServletRequestservletRequest=(MultipartHttpServletRequest)request; MapfileMap=servletRequest.getFileMap(); for(Map.Entryentry:fileMap.entrySet()){ logger.info("name:{}",entry.getKey()); MultipartFilemultipartFile=(MultipartFile)entry.getValue(); try{ FileUtil.writeFile(multipartFile.getInputStream(),path+"/12_"+multipartFile.getOriginalFilename()); }catch(IOExceptione){ e.printStackTrace(); } } return"{'result':'OK'}"; } @RequestMapping(value="/uploadII") publicStringuploadII(@RequestParam("uploadFile")MultipartFileuploadFile){ logger.info("upload:{}",uploadFile); try{ InputStreaminputStream=uploadFile.getInputStream(); StringoriginalFilename=uploadFile.getOriginalFilename(); logger.info("file:{}",originalFilename); FileUtil.writeFile(inputStream,path+"/"+originalFilename); }catch(IOExceptione){ e.printStackTrace(); } return"{'result':'OK'}"; }
pox.xml:
commons-fileupload commons-fileupload 1.3
注入CommonsMultipartResolver:
@Bean publicCommonsMultipartResolverinitCommonsMultipartResolver(){ CommonsMultipartResolverresolver=newCommonsMultipartResolver(); resolver.setMaxUploadSize(104857600); resolver.setMaxInMemorySize(4096); returnresolver; }
GitHub:axios
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。