SpringBoot+Mybatis实现图片按用户上传存储和获取用户图片功能

简单实现了下图片上传与个人图片显示的流程，给一个不知道怎么实现的兄弟看下。

项目介绍

  该项目实现文件上传功能，在前端上传图片和用户名，将图片保存在本地，同时将路径存储至数据库。之后可利用用户名进行对应存储图片路径获取和显示。

实体类和mapper

  利用mybatis实现实体存储和获取
  Img实体类

public class Img implements Serializable{
   

    private static final long serialVersionUID = 8990798455744465533L;

    private int id;
    private String path;
    private String owner;
	
	//getter&setter
}

  主要成员是自增id，所在路径和所有者。

  ImgMapper

@Mapper
public interface ImgMapper {
   
    @Select("select id, path, owner from img where owner = #{ownerName}")
    public List<Img> getImgByOwner(String ownerName);

    @Insert("insert into img(path, owner) values(#{path}, #{owner})")
    @Options(useGeneratedKeys = true, keyProperty = "id")
    public int insertImg(Img img);
}

  简单的查和存，id用的自增，插入时利用@Options注解进行指定，表结构比较简单就不放了。

图像上传

  本项目使用普通的html文件，主要组件就是file类型的input，利用ajax进行图像的传输。
  Html

<div id="upload" class="center">
            <h1>img upload</h1>
            <label for="ownername">owner:</label><input type="text" name="ownername" id="ownername"/>
            <input type="file" name="filename" id="filename" accept="image/png, image/jpeg, image/jpg" onchange="checkImg()"/>
            <input type="button" id="submit" onclick="imgUpload()" value="submit"/>
</div>
<div id="load_img" class="center"></div>

  owner用来模拟用户名，真实用的时候从会话中获取即可。
  Load_img用来显示当前选择图像

  JS

//防止文件为空或体积过大
function checkImg(){
   
    var fileName=$("#filename").val()
    fileName=fileName.replace("","")
    var flag=true
    if(fileName==""){
   
        flag=false
        alert("请选择图片")
    }
    else{
   
        var size = $("#filename")[0]