首先在ElementUi官网打开上传
?找到用户上传
?将该代码引用
<el-upload
class="avatar-uploader"
action="https://jsonplaceholder.typicode.com/posts/"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<style>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
<script>
export default {
data() {
return {
imageUrl: ''
};
},
methods: {
handleAvatarSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw);
},
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
return isJPG && isLt2M;
}
}
}
</script>将action改为引用的路径，比如：
action="/common/upload"这个路径是服务器的路径，如：
@RequestMapping("/common")
@Controller
public class ImageController {
@RequestMapping("/upload")
@ResponseBody
public String upload(MultipartFile file){
return "照片";
}
}
随后打开网页进行调试，上传照片打开F12结果如下：
?出现这种情况意味着成功连接到后端
打印输出结果
System.out.println(file.toString());此时在后端显示如下结果意味着成功
org.springframework.web.multipart.support.StandardMultipartHttpServletRequest$StandardMultipartFile@47e72e36然后通过file.transferTo()将图片保存到本地
public String upload(MultipartFile file){
try {
file.transferTo(new File("D:\\桌面\\学生管理系统图片\\test1.jpg"));
} catch (IOException e) {
e.printStackTrace();
}
return "照片";
}此时可以使用动态数据保存路径，保证在yml中也可以更改
首先在yam配置文件设置路径
image:
path: D:\桌面\学生管理系统图片\然后在controller层进行设置路径
@Value("${image.path}")
private String basePath;随后进行UUID为图片名字进行复制，防止重复覆盖
String jpgname = UUID.randomUUID().toString();最终效果如下：
后端：
@RequestMapping("/common")
@Controller
public class ImageController {
@Value("${image.path}")
private String basePath;
@RequestMapping("/upload")
@ResponseBody
public String upload(MultipartFile file){
System.out.println(basePath);
String path=null;
try {
String jpgname = UUID.randomUUID().toString();
path=basePath+jpgname+".jpg";
file.transferTo(new File(path));
} catch (IOException e) {
e.printStackTrace();
}
System.out.println(path);
return path;
}
}前端：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/axios-0.18.0.js"></script>
<script src="../js/vue.js"></script>
<script src="../elementui/index.js"></script>
<link rel="stylesheet" href="../elementui/index.css">
<style>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
</head>
<body>
<div id="app">
<el-upload
class="avatar-uploader"
action="/common/upload"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</div>
<script>
var app=new Vue({
el:"#app",
data(){
return{
imageUrl: ''
}
},methods:{
handleAvatarSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw);
console.log(this.imageUrl)
},
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
return isJPG && isLt2M;
}
}
})
</script>
</body>
</html>