springboot+element ui 怎么实现多文件本地上传
需求分析
用户可以一次拖拉多张图片进行上传,上传的文件根据上传的时间存放在本地指定位置,并按天数放在同一文件夹,用户上传错误的图片可以进行撤销。
前端
<template>
<div>
<el-upload
class="upload-demo"
name="pictures"
drag
:action="imageAction"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件,且不超过500KB</div>
</el-upload>
</div>
</template>
<script>
export default {
data() {
return {
imageAction: this.$http.adornUrl(`/pictures/upload`),
fileList: []
}
},
methods: {
handleChange(file, fileList) {
this.fileList = fileList
},
handleRemove(file, fileList) {
this.fileList = fileList
var name
name=file.name
this.$http({
url: this.$http.adornUrl('/delete'),
method: 'post',
data: this.$http.adornData(name, false)
}).then(({data}) => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500
})
} else {
this.$message.error(data.msg)
}
})
},
handleAvatarSuccess (res, file) {
this.imageUrl = common.imgadress + res.msg
this.dataForm.imgUrl = res.msg
console.log(this.imageUrl)
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${ file.name }?`);
},
beforeAvatarUpload (file) {
var isJPG = false
if (file.type === 'image/jpeg' || file.type === 'image/png') {
isJPG = true
}
const isLt2M = file.size / 1024 < 500
if (!isJPG) {
this.$message.error('上传图片只能是 JPG/PNG 格式!')
}
if (!isLt2M) {
this.$message.error('上传图片大小不能超过 500K!')
}
return isJPG && isLt2M
}
}
}
</script>
<style>
.l-s {
background-color: #fff;
padding: 20px;
padding-top: 1px;
}
.d-z {
text-align: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(255, 255, 255, 0.5);
z-index: 1000;
}
</style>
后端
Controller
@RestController
public class UploadDownController {
@RequestMapping("/pictures/upload")
public R upload(@RequestParam("pictures") MultipartFile[] pictures, HttpServletRequest request) throws IOException {
String path = "C:\\Users\\Administrator\\Desktop\\upload";
Date d = new Date();
SimpleDateFormat sdf2 = new SimpleDateFormat("yyyy-MM-dd");
String date = sdf2.format(d);
path = path + "\\" + date;
File filePath = new File(path);
if (!filePath.exists() && !filePath.isDirectory()) {
System.out.println("目录不存在,创建目录:" + filePath);
filePath.mkdirs();
}
for (MultipartFile picture : pictures) {
String originalFileName = picture.getOriginalFilename();
File targetFile = new File(path, originalFileName);
try {
picture.transferTo(targetFile);
} catch (IOException e) {
e.printStackTrace();
return R.error(500, originalFileName + "上传失败");
}
}
return R.ok("上传成功");
}
@RequestMapping("/delete")
public R delete(@RequestBody String name) {
String path = "C:\\Users\\Administrator\\Desktop\\upload";
Date d = new Date();
SimpleDateFormat sdf2 = new SimpleDateFormat("yyyy-MM-dd");
String date = sdf2.format(d);
path = path + "\\" + date;
name=name.replaceAll("\"","");
path = path +"\\"+ name;
try {
File targetFile = new File(path);
targetFile.delete();
} catch (Exception e) {
e.printStackTrace();
return R.error("删除失败");
}
return R.ok("删除成功");
}
}
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/dedcf75c91a6fe09e269f02342e71b19.jpeg#pic_center)