SpringBoot + zyupload ：优雅的实现网站文件上传，用户头像自定义

前言：近期做网站项目遇到一个小功能，实现网站用户自定义上传头像，中间踩了很多坑，所以拿来分享一下，有涉及该类技术问题（SpringBoot项目文件上传）可参考一下

1.开发前准备

• SpringBoot项目，SpringBoot基础

• zyupload插件（可去资源网站下载）

  
  
  zyupload

• MySql 数据库，自己定义用户表（包含头像路径字段即可）

• maven相关依赖 （仅展示io操作bufen）

        
        
            commons-fileupload
            commons-fileupload
            1.3.3
        

• 数据库字段可参照下面 实体类 创建(Mybatis-plus)

package com.ht.webfront.entity;

import com.baomidou.mybatisplus.annotation.IdType;
import java.util.Date;
import com.baomidou.mybatisplus.annotation.Version;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.FieldFill;
import com.baomidou.mybatisplus.annotation.TableLogic;
import com.baomidou.mybatisplus.annotation.TableField;
import java.io.Serializable;
import io.swagger.annotations.ApiModel;
import io.swagger.annotations.ApiModelProperty;
import lombok.Data;
import lombok.EqualsAndHashCode;
import lombok.experimental.Accessors;

/**
 * 

 *  * 用户实体类
 *  * 
 *  *
 *  * @author 掌灬纹
 *  * @since 2021-03-11
 */
@Data
@EqualsAndHashCode(callSuper = false)
@Accessors(chain = true)
@ApiModel(value="User对象", description="")
public class User implements Serializable {

    private static final long serialVersionUID = 1L;

    @ApiModelProperty(value = "自增id")
    @TableId(value = "id", type = IdType.AUTO)
    private Integer id;

    @ApiModelProperty(value = "用户编号")
    private String uid;

    @ApiModelProperty(value = "角色编号")
    private Integer roleId;

    @ApiModelProperty(value = "用户名")
    private String username;

    @ApiModelProperty(value = "密码")
    private String password;

    @ApiModelProperty(value = "头像")
    private String avatar;

    @ApiModelProperty(value = "登录时间")
    private Date loginDate;

    @ApiModelProperty(value = "创建时间")
    @TableField(fill = FieldFill.INSERT)
    private Date gmtCreate;

    @ApiModelProperty(value = "修改时间")
    @TableField(fill = FieldFill.INSERT_UPDATE)
    private Date gmtModified;

    @ApiModelProperty(value = "版本号")
    @Version
    private Integer version;

    @ApiModelProperty(value = "逻辑删除")
    @TableLogic
    private Integer deleted;

}

2. 定义上传路径常量（常量信息提取）

package com.ht.webfront.persistence;

/**
 * 资源路径枚举
 */
public class ResourceConst {
    /**
     * 资源存储根路径
     */
    public static final String ROOT_PATH = "D:\\resources\\";

    // 视频文件
    public static final String VIDEO = "video\\";

    // 图片
    public static final String IMAGE = "image\\";

    // 文档 xls xlsx
    public static final String DOCUMENT = "document\\";

    // avatar 特定头像存放位置
    public static final String AVATAR = "avatar\\";

}

3.编写简易前端页面 （含头像展示，zyupload文件上传插件即可，部分代码示例）

        
        

            

                

                    

                        头像上传： 

                        仅支持 png jpg 格式单个图片上传，最大1MB(*^_^*)~
                    
                    

                
            
        

4.根据前端JS定义的上传插件处理 URL路径编写控制器(/user/avatarUpload)

@Controller
public class UserController{
    @ResponseBody
    @PostMapping("/user/avatarUpload")
    public String doUploadAvatar(
            HttpServletRequest request,
            HttpServletResponse response,
            @RequestParam("file") MultipartFile file
    ){
        // 上传根路径
        String rootPath = ResourceConst.ROOT_PATH + ResourceConst.AVATAR;
        //文件名 后缀名
        String filename = file.getOriginalFilename();
        String suffix = filename.substring(filename.lastIndexOf("."));
        // 唯一文件名
        String uidFile = CupidUtils.getUuid() + suffix;

        //System.out.println(rootPath + " : " + uidFile);

        // 图片上传
        File target = new File(rootPath,uidFile);
        if (!target.exists()){
            target.mkdirs();
        }

        try {
            file.transferTo(target);
            // todo: 修改数据库头像位置信息
            User user = (User) request.getSession().getAttribute(LoginUser.LOGIN_USER_SESSION);
            // 获取本地静态资源路径
            String localPath = "/staticmv/avatar/" + uidFile;
            user.setAvatar(localPath);
            userService.updateById(user);
            return "头像上传成功";
        } catch (IOException e) {
            e.printStackTrace();
        }
        return "头像上传失败！";
    }
}

5. 最关键，配置SpringBoot 静态资源路径映射

• mvc-config 配置

package com.ht.webfront.config;

import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class SpringMVCConfig implements WebMvcConfigurer {


    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/staticmv/**").addResourceLocations("file:///D:\\resources\\");
        //addResourceHandlers(registry);
    }
}

• yml配置

#对外暴露 静态资源接口
file:
  uploadFloder: D:/resources/
  staticAccessPath: /static/**
  common:
    uploadWindow: D:\resources\

6.可以测试了┗|｀O′|┛ 嗷~~

(1).上传图片

界面.jpg

选择文件.jpg

(2). mybatis-plus 控制台打印日志（更新数据库）

日志

数据库字段修改

(3). 刷新页面，展示成果 ( :

头像上传成功

本地目录

ps:文中相关资源可私信作者获取~