请代码举例,springboot+element-ui上传图片
时间: 2023-03-30 09:02:55 浏览: 120
好的,以下是一个简单的 Spring Boot 和 Element UI 实现图片上传的示例代码:
前端代码:
<template>
<div>
<el-upload
class="upload-demo"
action="/upload"
:on-success="handleSuccess"
:before-upload="beforeUpload"
:auto-upload="false"
:file-list="fileList"
list-type="picture-card"
:on-remove="handleRemove"
>
<i class="el-icon-plus"></i>
</el-upload>
</div>
</template>
<script>
export default {
data() {
return {
fileList: []
};
},
methods: {
handleSuccess(response, file, fileList) {
console.log(response);
},
beforeUpload(file) {
const isJPG = file.type === 'image/jpeg';
const isPNG = file.type === 'image/png';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG && !isPNG) {
this.$message.error('上传图片只能是 JPG/PNG 格式!');
}
if (!isLt2M) {
this.$message.error('上传图片大小不能超过 2MB!');
}
return isJPG || isPNG && isLt2M;
},
handleRemove(file, fileList) {
console.log(file, fileList);
}
}
};
</script>
后端代码:
@RestController
public class FileUploadController {
@PostMapping("/upload")
public String upload(@RequestParam("file") MultipartFile file) {
if (file.isEmpty()) {
return "上传失败,请选择文件";
}
String fileName = file.getOriginalFilename();
String filePath = "D:/upload/";
File dest = new File(filePath + fileName);
try {
file.transferTo(dest);
return "上传成功";
} catch (IOException e) {
e.printStackTrace();
}
return "上传失败!";
}
}
这个示例中,前端使用了 Element UI 的 Upload 组件,后端使用了 Spring Boot 的文件上传功能。在上传之前,前端会对图片进行格式和大小的校验,如果不符合要求会提示错误信息。后端会将上传的图片保存到指定的文件夹中。
阅读全文