Vue+element ui+springboot实现用户头像修改_spring+elementui实现头像替换

头像上传

前台上传文件可以直接用element ui的上传组件

		<el-upload
            class="avatar-uploader"
            action="http://localhost:8080/Login/upload"//上传的地址，即是后台保存文件的接口
            :show-file-list="false"//是否显示已上传文件列表
            :on-success="handleAvatarSuccess"//成功之后执行的函数
            :data="{'userId':user.eid,'status':userStatus}"//传入后台的用户状态和用户ID（注意要是对象）
            :before-upload="beforeAvatarUpload"//上传前执行的函数判断图片格式
            style="display: inline-block;width: 300px"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar">//上传成功后展示的图片
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>

          </el-upload>
        handleAvatarSuccess(res, file) {
          this.imageUrl = URL.createObjectURL(file.raw);
          console.log(URL.createObjectURL(file.raw))
          console.log(this.imageUrl)
          console.log(res)
        },
        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;
        },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

后台接收

 	/**
     * 修改头像
     */
    @PostMapping("/upload")
    public String singleFileUpload(@RequestParam("file") MultipartFile file,
                                   HttpServletRequest request,Long userId,String status) {
		//@RequestParam("file") MultipartFile file为接收图片参数
		//Long userId,String status 用户Id和状态

        try {
            byte[] bytes = file.getBytes();
            String imageFileName = file.getOriginalFilename();
            String fileName = UpPhotoNameUtils.getPhotoName("img",imageFileName);
            Path path = Paths.get("C:\\框架\\D4\\d4_pc_ui\\src\\assets\\images\\img\\" + fileName);
          //“C:\\框架\\D4\\d4_pc_ui\\src\\assets\\images\\img\\”为本地目录
            Files.write(path, bytes);//写入文件
            String avatar_url=fileName;
            if (status.equals("学生")){//判断学生状态调用dao层方法，把图片名称写入数据库
                studentService.updateAvatar(userId,avatar_url);//dao层方法
            }
            else {
                teacherService.updateAvatar(userId,avatar_url);
            }
            System.out.println(fileName+"\n");
            return fileName;//返回文件名字
        } catch (IOException e) {
            e.printStackTrace();
        }
        return "";
    }
    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

根据时间生成图片名称，防止图片名称重复

import java.util.Calendar;

public class UpPhotoNameUtils {
    public static String getPhotoName(String name,String imageFileName){
        String fileName = name;
        Calendar cal=Calendar.getInstance();
        //如果年的目录不存在，创建年的目录
        int year=cal.get(Calendar.YEAR);
        fileName=fileName + "_" + year;
        //如果月份不存在，创建月份的目录
        int month=cal.get(Calendar.MONTH)+1;
        fileName=fileName+"_";
        if(month<10)
        {
            fileName=fileName+"0";
        }
        fileName=fileName+month;
        //生成文件名的日部分
        int day=cal.get(Calendar.DAY_OF_MONTH);
        fileName=fileName+"_";
        if(day<10)
        {
            fileName=fileName+"0";
        }
        fileName=fileName+day;
        //生成文件名的小时部分
        int hour=cal.get(Calendar.HOUR_OF_DAY);
        if(hour<10)
        {
            fileName=fileName+"0";
        }
        fileName=fileName+hour;
        //生成文件名的分钟部分
        int minute=cal.get(Calendar.MINUTE);
        if(minute<10)
        {
            fileName=fileName+"0";
        }
        fileName=fileName+minute;
        //生成文件名的秒部分
        int second=cal.get(Calendar.SECOND);
        if(second<10)
        {
            fileName=fileName+"0";
        }
        fileName=fileName+second;
        //生成文件名的毫秒部分
        int millisecond=cal.get(Calendar.MILLISECOND);
        if(millisecond<10)
        {
            fileName=fileName+"0";
        }
        if(millisecond<100)
        {
            fileName=fileName+"0";
        }
        fileName=fileName+millisecond;
        //生成文件的扩展名部分,只截取最后单位
        String endName = imageFileName.substring(imageFileName.lastIndexOf("."));//截取之后的值
        fileName=fileName+ endName;
        return fileName;
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

要是有服务器，可直接存入服务器，后面存入数据库就可以直接是图片在服务器的路径，前台就可以直接使用，更加方便一些
（ps：这个后台接口参考了一篇博文，暂时没找到）

前台读取并展示

由于没有服务器，存进数据库的是图片的名称
所以需要在前台处理一下

 userAvatarUrl:require("../../assets/images/img/"+this.$store.getters.userInfo.avatarUrl),
1

注意： require非常重要，如果没有它将无法识别路径，userAvatarUrl将只是一个字符串（后面的this.$store.getters.userInfo.avatarUrl是存到vuex里面的用户的头像名称）

小白一个，如有错误请大佬斧正！