axios实现简单文件上传功能

本文实例为大家分享了axios实现文件上传功能的具体代码，供大家参考，具体内容如下

前台页面：

引入axios js文件

<script src=\"https://unpkg.com/axios/dist/axios.min.js\"></script>

HTML:

<input type=\"file\" name=\"img\"/>
<br>
<span οnclick=\"upload()\">上传图片</span>

JS:

function upload() {
 alert(\"上传\")
 let file = document.getElementsByName(\'img\')[0].files[0];
 
 let formData = new FormData();
 formData.append(\"uploadFile\",file,file.name);
 
 const config = {
 headers: { \"Content-Type\": \"multipart/form-data;boundary=\"+new Date().getTime() }
 };
 
 axios
 .post(\"/file/upload\",formData,config)
 .then(function (response) {
  console.log(response);
 })
 .catch(function (error) {
  console.log(error);
 });
}

后台接收：

@PostMapping(value = \"/upload\")
public String upload(HttpServletRequest request){
 logger.info(\"开始上传……\");
 
 MultipartHttpServletRequest servletRequest = (MultipartHttpServletRequest) request;
 Map<String, MultipartFile> fileMap = servletRequest.getFileMap();
 for (Map.Entry entry : fileMap.entrySet()) {
 logger.info(\"name : {}\",entry.getKey());
 MultipartFile multipartFile = (MultipartFile) entry.getValue();
 try {
  FileUtil.writeFile(multipartFile.getInputStream(),path+\"/12_\"+multipartFile.getOriginalFilename());
 } catch (IOException e) {
  e.printStackTrace();
 }
 }
 return \"{\'result\':\'OK\'}\";
}
 
 
@RequestMapping(value = \"/uploadII\")
public String uploadII(@RequestParam(\"uploadFile\") MultipartFile uploadFile){
 logger.info(\"upload : {}\",uploadFile);
 try {
 InputStream inputStream = uploadFile.getInputStream();
 String originalFilename = uploadFile.getOriginalFilename();
 logger.info(\"file : {}\",originalFilename);
 FileUtil.writeFile(inputStream,path+\"/\"+originalFilename);
 } catch (IOException e) {
 e.printStackTrace();
 }
 return \"{\'result\':\'OK\'}\";
}

pox.xml:

<!-- 文件上传 -->
<dependency>
 <groupId>commons-fileupload</groupId>
 <artifactId>commons-fileupload</artifactId>
 <version>1.3</version>
</dependency>

注入CommonsMultipartResolver:

@Bean
public CommonsMultipartResolver initCommonsMultipartResolver(){
 CommonsMultipartResolver resolver = new CommonsMultipartResolver();
 resolver.setMaxUploadSize(104857600);
 resolver.setMaxInMemorySize(4096);
 return resolver;
}

GitHub：axios

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