axios实现简单文件上传功能
编程学习 2021-07-04 15:01www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了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：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。