Vue前后端分离完成文件上传
程序员文章站
2024-03-20 17:49:28
...
Vue前后端分离完成文件上传
1、为文件上传框绑定一个ref
<input type="file" id="imgfile" ref="myFile" style="display: none" onchange="imgfileChange()" />
2、指定一个方法将改文件上传
1、let formData=new FormData();//新建一个表单
2、formData.append('file',file );//将获取的文件追加到表单
let myFile=this.$refs.myFile;
let files=myFile.files;
let file=files[0];
let formData=new FormData();//新建一个表单
formData.append('file',file );//将获取的文件追加到表单
//发送axios将表单发送
axios({
method:'post',
url:'http://localhost:8989/place/save',
data:formData,
headers:{
'Content-Type': 'multipart/form-data'//必须要指定
}
}).then((res=>{
console.log(res.data);
}))
3、指定文件上传的位置
upload.dir=G:/IdeaProjects/springboot/055-springboot-travels/src/main/resources/static/images
4、引入文件工具类的依赖,便于拿到文件后缀名
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.4</version>
</dependency>
5、后端写一个控制器接收请求
获取文件后缀
String extension = FilenameUtils.getExtension(file.getOriginalFilename());
使用时间戳的方式重命名文件
String newFileName = new SimpleDateFormat("yyyyMMddHHmmss").format(new Date()) +"."+ extension;
@Value("${upload.dir}")
private String realPath;
@PostMapping("/save")
public String save(MultipartFile file) {//无需@RequestBody
System.out.println(file.getOriginalFilename());
//文件上传
String extension = FilenameUtils.getExtension(file.getOriginalFilename());
String newFileName = new SimpleDateFormat("yyyyMMddHHmmss").format(new Date()) +"."+ extension;
try {
file.transferTo(new File(realPath, newFileName));
} catch (IOException e) {
e.printStackTrace();
}
return "ok";
}
这样,上传的文件就保存到upload.dir对应的路径中了
上一篇: iView组件+Django实现前后端分离上传图片
下一篇: 算法_二分查找(折半查找)