今天简单实现上传文件功能,上传文件是需要Jar包的。首先我们在pom文件中引入jar包依赖;
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.4</version>
</dependency>
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.1</version>
</dependency>
vue前端:
<input type="file" name="upfile" @change="upload"></input>
<button @click="uploadFile">上传文件</button>
data() {
return {
file: ''
}
},
methods: {
uploadFile(e) {
let formData = new FormData();
// 把内容放入到FormData中
formData.append("upfile", this.file);
axiosRequest({
url: '/api/uploadFile',
method: 'post',
// 通过data属性将内容携带到后台
data: formData,
// 设置请求头
headers: {
"Content-Type" : "multipart/form-data"
}
}).then(res => {
if (res.data.status === 200) {
this.$notify.success({
title: '成功',
message: res.data.message
});
} else if (res.data.status === 400) {
this.$notify.error({
title: '错误',
message: res.data.message
});
}
},
err => {
this.$notify.error({
title: '错误',
message: "上传失败!"
});
});
},
upload(e) {
// 获取input内容
this.file = e.target.files[0];
}
}
后台:
@PostMapping("/uploadFile")
public ResultMap uploadFile(@RequestParam("upfile") MultipartFile upfile) throws IOException {
ResultMap resultMap = new ResultMap();
String originalFilename = upfile.getOriginalFilename();
String realPath = ResourceUtils.getURL("classpath:").getPath() + "upload";
File file = new File(realPath, originalFilename);
if (!file.exists()) {
try {
upfile.transferTo(new File(realPath, originalFilename));
resultMap.setSuccess();
resultMap.setMessage("上传成功!");
} catch (IllegalStateException | IOException e) {
resultMap.setFaild();
resultMap.setMessage("上传失败!");
e.printStackTrace();
}
} else {
file.delete();
try {
upfile.transferTo(new File(realPath, originalFilename));
} catch (IllegalStateException | IOException e) {
e.printStackTrace();
}
resultMap.setSuccess();
resultMap.setMessage("文件替换成功!");
}
return resultMap;
}