前后端分离实现图片上传

由于我有点赶，就没有将按照标准去写service和serviceImpl了，请见谅

目录

目录

1.准备阶段1.1数据库

​1.2相关的类

1.2.1 UserImg与数据库的表相对应

  1.2.2  RespBean用来返回json格式        

  1.2.3  UserImgMapper

 1.2.4 UserImgMapper.xml

1.2.5 UserAddPhoto 用来接收前端传来的json

1.2.6 UserChangePhoto用来接收前端json的工具类

2.Controller的相关方法

2.2将数据库的图片以base64加密后返回给前端

2.3查看历史头像，将数据库中该用户的所有头像以json格式返回给前端，图片仍然以base64进行了加密

---

目录

1.准备阶段
1.1数据库

1.2相关的类

1.2.1 UserImg与数据库的表相对应

@Data
@AllArgsConstructor
@NoArgsConstructor
public class UserImg {
    private String id;
    private byte[] photo;
}

  1.2.2  RespBean用来返回json格式
        

@Data
@AllArgsConstructor
@NoArgsConstructor
public class RespBean {
    private long code;
 
    private String msg;
 
    private Object object;
 
 
    public static RespBean success(String msg) {
        return new RespBean(200, msg, null);
    }
    public static RespBean success(Object object) {
        return new RespBean(200,null ,object);
    }
    public static RespBean success(String msg, Object object) {
        return new RespBean(200, msg, object);
    }
 
 
    public static RespBean error(String msg) {
        return new RespBean(500, msg, null);
    }
 
 
    public static RespBean error(String msg,Object object) {
        return new RespBean(500, msg, object);
    }
}

 

  1.2.3  UserImgMapper

@Mapper
@Repository
public interface UserImgMapper extends BaseMapper<UserImg> {
    void insertPhoto(@Param("e") UserImg photo);
    List<UserImg> findAllImgById(String userId);
}

 1.2.4 UserImgMapper.xml

1.2.5 UserAddPhoto 用来接收前端传来的json

import lombok.Data;
import org.springframework.web.multipart.MultipartFile;

/**
 * @author CC
 * @describe
 * @create 2021-11-12-12:15
 */
@Data
public class UserAddPhoto {
    private byte[] bytes;
    private String userId;
}

1.2.6 UserChangePhoto用来接收前端json的工具类

/**
 * @author CC
 * @describe
 * @create 2021-11-12-12:43
 */
@Data
public class UserChangePhoto {
    private String userId;
}

2.Controller的相关方法

        2.1 文件上传（前端给后端传来经base64编码的图片和该用户的id，后端用UserAddPhoto来接收）

  @PostMapping("/user/addimg")
    private RespBean addimg(@RequestBody UserAddPhoto userAddPhoto){
        byte[] bytes = userAddPhoto.getBytes();
        String userId = userAddPhoto.getUserId();
        try {
            byte[] data;
            data = bytes;
            UserImg photo = new UserImg();
            photo.setId(userId);
            photo.setPhoto(data);
            userimgMapper.insertPhoto(photo);
        }catch (Exception e){
            e.printStackTrace();
            return RespBean.error("上传失败");
        }
        return RespBean.success("上传成功");
    }

 

其中userId，bytes均为前端传来的， userId为用户的id，bytes为图片经过base64编码后的字节数组。

2.2将数据库的图片以base64加密后返回给前端

    /**
     * 确认修改头像
     * @return
     */
    @RequestMapping("/user/change")
    public  RespBean change(@RequestBody UserChangePhoto userChangePhoto){
        String userId = userChangePhoto.getUserId();
        List<UserImg> allImgById = userimgMapper.findAllImgById(userId);
        if (allImgById.size()<1){
            return RespBean.error("更改错误");
        }
        UserImg userImg = allImgById.get(allImgById.size()-1);
        return RespBean.success("更改成功",userImg);
    }

其中上面的userId为返回给前端的用户id，下面的就是数据库中图片经过base64编码后的字节数组，前端可以将其进行base64解码后还原成图片。

2.3查看历史头像，将数据库中该用户的所有头像以json格式返回给前端，图片仍然以base64进行了加密

 @RequestMapping("/user/historyImg")
    public  RespBean historyImg(@RequestBody UserChangePhoto userChangePhoto){
        String userId = userChangePhoto.getUserId();
        List<UserImg> allImgById = userimgMapper.findAllImgById(userId);
        if (allImgById.size()<1){
            return RespBean.error("历史头像为空");
        }
        return RespBean.success(allImgById);
    }

 

 其中上面的userId为返回给前端的用户id，下面的就是数据库中该用户所使用过的图片经过base64编码后的字节数组，前端可以将其进行base64解码后还原成图片。