SpringBoot 使用MultipartFile上传组件实现本地上传用户头像

 GIF动图展示

---

本章目录

 GIF动图展示

主要实现思路

1.使用MultipartFile需要引入的依赖

2.前端使用的是JSP页面，这里用的onchange当内容发送改变的时候调用JS方法实现异步更新用户头像​

3.以下是JS+jQuery代码

4.以下是后端控制器Controller的代码

关键代码

1.后台控制器关键代码：

2.使用到的工具类UUIDUtils的代码

3.application.yml的关键配置

以上所有步骤都完成了但是后台还是取不到值，解决方法如下

---

主要实现思路

前端通过ajax请求将图片数据传递到后台，后台再通过前端传递过来的图片二进制数据得到图片的名称，并把图片写入到本地保存（路径是项目目录下的绝对路径），同时把图片名称存储到数据库中表中的某一列，然后把图片的名称也传递到前端，前端根据后端传来的图片名称拼接上项目的相对路径即可显示头像。

1.使用MultipartFile需要引入的依赖

    commons-fileupload
    commons-fileupload
    1.4


    commons-io
    commons-io
    2.4

2.前端使用的是JSP页面，这里用的onchange当内容发送改变的时候调用JS方法实现异步更新用户头像

3.以下是JS+jQuery代码

（注意！ajax中传递的数据是 multipart/form-data ，不过不写貌似也没问题，但如果是form表单提交数据的话必须加上 enctype="multipart/form-data" 属性，不然后端会取不到值）

4.以下是后端控制器Controller的代码

关键代码 1.后台控制器关键代码：

//判断是否上传了头像
if (!file.isEmpty()){
    logger.info("进行头像的上传");

    //文件存储在本地的绝对路径
    String path = ("D:\IntelliJ IDEA\mall\src\main\webapp\res\images\item\userProfilePicture\");

    //UUIDUtils为工具类，使用它随机生成一串字符（作用：上传图片时给图片名称拼接上去，防止图片名称重复）
    String n = UUIDUtils.create();
    String path2 = path + n + file.getOriginalFilename();
    //创建File对象，一会向该路径下上传文件
    File newFile = new File(path2);
    //MultipartFile的方法直接写文件
    file.transferTo(newFile);
}

2.使用到的工具类UUIDUtils的代码

public class UUIDUtils {
    

    private static boolean IS_THREADLOCALRANDOM_AVAILABLE = false;
    private static Random random;
    private static final long leastSigBits;
    private static final ReentrantLock lock = new ReentrantLock();
    private static long lastTime;

    static {
        try {
            IS_THREADLOCALRANDOM_AVAILABLE = null != UUIDUtils.class.getClassLoader().loadClass(
                    "java.util.concurrent.ThreadLocalRandom");
        } catch (ClassNotFoundException e) {
        }

        byte[] seed = new SecureRandom().generateSeed(8);
        leastSigBits = new BigInteger(seed).longValue();
        if (!IS_THREADLOCALRANDOM_AVAILABLE) {
            random = new Random(leastSigBits);
        }
    }

    private UUIDUtils() {
    }

    
    public static String random() {
        byte[] randomBytes = new byte[16];
        if (IS_THREADLOCALRANDOM_AVAILABLE) {
            java.util.concurrent.ThreadLocalRandom.current().nextBytes(randomBytes);
        } else {
            random.nextBytes(randomBytes);
        }

        long mostSigBits = 0;
        for (int i = 0; i < 8; i++) {
            mostSigBits = (mostSigBits << 8) | (randomBytes[i] & 0xff);
        }
        long leastSigBits = 0;
        for (int i = 8; i < 16; i++) {
            leastSigBits = (leastSigBits << 8) | (randomBytes[i] & 0xff);
        }

        return new UUID(mostSigBits, leastSigBits).toString().replaceAll("-", "");
    }

    
    public static String create() {
        long timeMillis = (System.currentTimeMillis() * 10000) + 0x01B21DD213814000L;

        lock.lock();
        try {
            if (timeMillis > lastTime) {
                lastTime = timeMillis;
            } else {
                timeMillis = ++lastTime;
            }
        } finally {
            lock.unlock();
        }

        // time low
        long mostSigBits = timeMillis << 32;

        // time mid
        mostSigBits |= (timeMillis & 0xFFFF00000000L) >> 16;

        // time hi and version
        mostSigBits |= 0x1000 | ((timeMillis >> 48) & 0x0FFF); // version 1

        return new UUID(mostSigBits, leastSigBits).toString().replaceAll("-", "");
    }
}

3.application.yml的关键配置

# 在Spring Boot中有默认的文件上传组件，在使用ServletFileUpload时需要关闭Spring Boot的默认配置
servlet:
  multipart:
    enabled: false
    # 最大的文件大小
    max-file-size: 20MB
    # 单次最大请求大小
    max-request-size: 20MB

以上所有步骤都完成了但是后台还是取不到值，解决方法如下

在SpringBoot启动类中加入以下代码，比如我的启动类是：

@SpringBootApplication
@EnableAutoConfiguration
public class MallApplication extends SpringBootServletInitializer {

    public static void main(String[] args) {
        SpringApplication.run(MallApplication.class, args);
    }

    //解决上传文件控制层接收为null的方法
    @Bean(name = "multipartResolver")
    public CommonsMultipartResolver multipartResolver() {
        CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver();
        return multipartResolver;
    }
}

---

最终，用户头像的上传的功能到这就结束了，如果本文帮你们解决了问题，不忘支持一下博主哦！