Springboot+ajax上传文件+ajax异步上传文件实现上传头像以及回显功能

Springboot+ajax上传文件+ajax异步上传文件实现上传头像以及回显功能

这是我第一次在CSDN上分享自己的一些学习成果，这次我想分享一些关于头像上传功能自己的一些想法。大家有什么不同的想法欢迎下面评论。

实现功能的步骤

大体可以分为两大步骤：
1.选择图片，确定之后图片回显。
2.上传提交。

图片回显功能实现

关于表单的前端代码我就不在这里进行展示了，代码都有详细的注解。

 

                    

                        
                    
                        选择头像
                       //当改变的时候触发test()方法。
                      注  册
                

大家不要在意这个前端的from表单，重要的是，放一个用于回显图片的。

//这个方法就是ajax异步上传，test()方法
//想要ajax，记得提前导入jQuery的js文件

//这里是ajaxUpload请求的代码
       //  图片回显，
         //    首先要把前端异步ajax上传的图片进行判断（是否为图片）
           //  其次要考虑不同浏览器导致上传图片的名字不同问题
           //我下面的代码只考虑了Edge浏览器的特殊性
@RequestMapping("/ajaxUpload")
    @ResponseBody
    public String ajaxUpload(@RequestParam("upload") MultipartFile file, HttpServletRequest request) throws Exception
    {
        //获取图片的名字
        String imgName=file.getOriginalFilename();
        //获取Mime类型,验证是否为图片类型
        String mimeType = request.getServletContext().getMimeType(imgName);
        if(mimeType==null || !mimeType.contains("image")){
            return "img/no.jpg";  //不是图片，直接返回默认图片
        }

        //判断当前请求来源于哪个浏览器
        String header = request.getHeader("User-Agent");  //   获取浏览器的信息
        if(header.contains("Edge")){
        //Edge浏览器返回的图片名字是绝对路径，所以我们要把图片名字提取出来
            imgName=imgName.substring(imgName.lastIndexOf('\\')+1, imgName.length());
        }
        //临时存放图片的路径
        String fileName="D:/qqProjectImage/shortTime_img/";
        //给图片名字加个防止重复的前缀
        imgName=UUID.randomUUID().toString().replace("-","")+"_"+imgName;
        //定义文件
        File newFile=new File(fileName,imgName);
        //清空文件的内容，因为是临时文件
        //这次用到了工具类清理文件，代码下面可见
        delAllFile(newFile.getParentFile().getPath());

        //检测文件夹是否存在
        if (!newFile.getParentFile().exists()) {
            newFile.getParentFile().mkdirs();
        }
        //返回给前端的地址
        //之所以返回这个地址，因为我配置了资源重定向，下面代码可见
        String path="/shortTime_img/"+imgName;
        //图片上传到文件中
        file.transferTo(newFile);
        return path;
    }

springboot资源重定向配置

@Configuration
public class MyMvcConfig implements WebMvcConfigurer {

    //资源重定向
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/shortTime_img/**").
                addResourceLocations("file:/" + "D:/qqProjectImage/shortTime_img/");
        registry.addResourceHandler("/longTime_img/**").
                addResourceLocations("file:/" + "D:/qqProjectImage/longTime_img/");
    }
}

工具类

public class FileUtils {

//此方法可以清空文件
    public static boolean delAllFile(String path) {
        boolean flag = false;
        File file = new File(path);
        if (!file.exists()) {
            return flag;
        }
        if (!file.isDirectory()) {
            return flag;
        }
        String[] tempList = file.list();
        File temp = null;
        for (int i = 0; i < tempList.length; i++) {
            if (path.endsWith(File.separator)) {
                temp = new File(path + tempList[i]);
            } else {
                temp = new File(path + File.separator + tempList[i]);
            }
            if (temp.isFile()) {
                temp.delete();
            }
            if (temp.isDirectory()) {
                delAllFile(path + "/" + tempList[i]);//先删除文件夹里面的文件
                flag = true;
            }
        }
        return flag;
    }
}

头像上传

 大家知道怎么图片回显了，以及一系列的图片存储以及资源重定向后，我相信头像上传就再也简单不过了。可以参考上述的请求写法。这里就不做过多的介绍了。

下面给大家展示效果

总结

  大家有什么提议欢迎提出来，大家一起学习进步。有什么问题也可以提出来。
  
 下一篇：长轮询和短轮询实现好友实时聊天，希望大家多关注哦！