微客导航 » 文章资讯 » axios实现简单文件上传功能

axios实现简单文件上传功能

2023-08-13 15:52:04 308

本文实例为大家分享了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

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

返回顶部
3162201930
czq8825@qq.com

axios实现简单文件上传功能

热门推荐

随机推荐