layui模型——头像上传到本地并在jsp中获取

 <div >
    <button type="button" class="layui-btn" id="tx"   >
        <i class="layui-icon">&#xe67c;</i>上传头像</button>
        <img id="txk" name="imag" style="transform:scale(2);" class="layui-nav-img"  >
    </div>

上为前端代码

下为js

<%--头像上传--%>
<script>
    layui.use('upload', function(){
        var upload = layui.upload;

        //执行实例
        var uploadInst = upload.render({
            elem: '#tx' //绑定元素，button的id
            ,url: 'lha/txUpload' //上传接口，后台处理接口
             //,auto: false //不自动上传，这个最好打开，不然后面用户只是点击图片就自动上传了
            // ,bindAction: '#LAY-user-back-submit' // 绑定上传按钮
            ,accept: 'images' // 只允许上传图片
            ,acceptMime: 'image/*'  // 打开文件选择器时只显示图片
            ,choose: function(obj){// 头像回调显示
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#txk').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                //上传完毕回调
            }
            ,error: function(){
                //请求异常回调
            }
        });
    });
</script>

图片上传到本地文件夹(controller层)

这里面图片名称需要根据自己配置的虚拟路径配合，不然路径不对，图片无法显示

/*
* 文件上传
* */
String path;
    public void setPath(String path){
        this.path=path;
    }
    public String getPath(){
        return this.path;
    }
  @ApiOperation("文件上传")
  @ApiResponses({
          @ApiResponse(code=20000,message = "头像上传成功"),
          @ApiResponse(code=20001,message = "头像上传失败")
  })
  @PostMapping("/txUpload")
  public MSG upload( @RequestParam("file")MultipartFile file,Model m){
    try {
      User user=new User();
    // 获取图片名称
    String fileName = file.getOriginalFilename();
    log.info("图片名称:{}",fileName);
    //上传文件存储的位置
        String filePath="D:/File/images/";
   //图片的名称用于传输到数据库
//防止该文件夹不存在，创建一个新文件夹
    File destFile = new File(filePath,fileName);
        setPath("/lh/images/"+fileName);
    destFile.getParentFile().mkdirs();
    //将文件存储到该位置
      file.transferTo(destFile);
    }
    catch (IOException e) {
      e.printStackTrace();
      return MSG.error().message("上传失败"+e.getMessage());
    }
    return MSG.success();
  }

 上传到数据库的格式

 

上传头像地址到数据库(controller层)

注册功能头像上传的部分的代码

 @PostMapping("/zcupdata")
  public MSG zcupdata(Long id,String uname,String password,String sex,String quanxian,String miaoshu){
    //进行数据更新
      if(getPath()==null){     //如果注册时没有上传图像，就返回code值为1，提醒用户上传头像
          return MSG.error().code(1);
      }
      String path="file:///D:/File/images/"+getPath();//本地的图片存储位置
    try {
    userService.zcupdata(id,uname,password,sex,quanxian,path,miaoshu);
    }catch (Exception e){
     e.printStackTrace();
     return MSG.error();
    }
    return MSG.success();
  }

Service层接口

void zcupdata(Long id, String uname, String password, String sex,String quanxian, String imag, String miaoshu);//注册

业务逻辑层（ServiceImpl）

//注册
    @Override
    public void zcupdata(Long id, String uname, String password,String sex, String quanxian, String imag, String miaoshu) {
        User user=new User();
        user.setId(id);
        user.setUname(uname);
        user.setSex(sex);
        user.setImag(imag);
        int qx=0;
        if(quanxian!=null&&quanxian!=""){
          qx=Integer.valueOf(quanxian);
        }
        user.setQuanxian(qx);
        user.setPassword(password);
        user.setMiaoshu(miaoshu);
        int res=userMapper.insert(user);
    }

测试：

点击立即提交

数据库 

 复制imag地址在浏览器打开

图片上传到本地后还需要进行配置虚拟路径，不然图片无法在html中显示

创建配置文件

编写配置文件内容

@Configuration
public class MywebAppConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
  registry.addResourceHandler("/images/**").addResourceLocations("file:///D:/File/images/");
    }
//    配置本地资源映射地址
//file:///D:/File/images/是本地图片存储的位置
///images/**是虚拟路径
}

前面的/lh是配置web时候添加的（名字可自定义更改），好像是什么web本地存储的路径，反正添加上就对了，不然显示404

 

 

 将登录获取的user存储到session中通过session中${sessionScope.user.imag}获取图片路径

相当于在本地获取路径file:///D:/File/images/111.jpg

登录的数据存储到session

Controller层

@PostMapping("/login")
  public MSG login(Long id,String password,HttpSession session){  //参数名称要与登录框name一致才可以接收到数据
    log.debug("接收到用户名:{},接收密码:{}",id,password);
    //进行登录
  try {
    User user=userService.login(id,password);
    //将登录成功的用户存储到session中
    session.setAttribute("user",user);  //名称要一样，不然前端jsp中${sessionScope.user.uname}获取不到
    return MSG.success();
  }catch (Exception e) {
    e.printStackTrace();
    return MSG.error();
  }

ServiceImpl层

 //登录
    @Override
    public User login(Long id, String password) {
        QueryWrapper<User> wrapper=new QueryWrapper<>();
        wrapper.eq("id",id);
        wrapper.eq("password",password);
        User one=super.getOne(wrapper);
        if (one==null){
            throw new RuntimeException("账号或密码错误");
        }
        return one;
    }

 <img src="${sessionScope.user.imag}" class="layui-nav-img" style="transform:scale(2);margin: 20%  0px 0px 45%"></div>

相当于src=/lh/images/111.jpg=file:///D:/File/images/111.jpg