实现图片上传（前后端）

前端代码：

//图片上传
        function uploadImage(fileDom) {
            //获取文件
            var file = fileDom.files[0];
            //判断类型
            var imageType = /^image\//;
            if (file === undefined || !imageType.test(file.type)) {
                $("#btn-ok").unbind("click").click(function () {
                    $("#modalDiv").modal("hide");
                });
                $(".modal-body").text("请选择图片！");
                $('#modalDiv').modal();
                return;
            }
            //判断大小
            if (file.size > 512000) {
                $("#btn-ok").unbind("click").click(function () {
                    $("#modalDiv").modal("hide");
                });
                $(".modal-body").text("图片大小不能超过500K！");
                $('#modalDiv').modal();
                return;
            }
            //清空值
            $(fileDom).val('');
            var formData = new FormData();
            formData.append("file", file);
            //上传图片
            $.ajax({
                url: "/admin/updateImageByAdminId",
                type: "post",
                data: formData, //注意要使用formData
                contentType: false,
                processData: false,
                dataType: "json",
                mimeType: "multipart/form-data",
                success: function (data) {
                    $(".loader").css("display", "none");
                    console.log(data)
                    if (data.code === 0) {
                        $("#admin_profile_picture").addClass("new").attr("src", "http://localhost:9092/images/item/adminProfilePicture/" + data.data.img); //如果这个图片无法显示，是因为后端图片回显的问题
                    } else {
                        alert("图片上传异常！");
                    }
                },
                beforeSend: function () {
                    $(".loader").css("display", "block");
                },
                error: function () {

                }
            });
        }

后端代码：

@PostMapping("updateImageByAdminId")
    @ResponseBody
    public R updateImageByAdminId(HttpServletRequest request, MultipartFile file){
        Admin admin = (Admin) request.getSession().getAttribute("admin");
        String filename = file.getOriginalFilename();
        log.info("文件上传的名称：{}", filename);
        filename = UUID.randomUUID()+filename.substring(filename.lastIndexOf("."));
        log.info("文件的新名称:{}",filename);
        //文件上传

        String filePath = System.getProperty("user.dir")+
                File.separatorChar+"src"+File.separatorChar+"main"+
                File.separatorChar+"resources"+File.separatorChar+"static"+
                File.separatorChar+"images"+File.separatorChar+"item"+
                File.separatorChar+"adminProfilePicture"+File.separatorChar+filename; //前端传图片存放在后端的具体位置（如下图所示）
        log.info("文件存放路径:{}",filePath);
        try {
            file.transferTo(new File(filePath));
        } catch (IOException e) {
            throw new RuntimeException("文件上传失败");
        }
        //实现个人信息的更新
        //设置用户的头像地址
        admin.setAdminProfilePictureSrc(filename);
        int result = adminService.updateImageByAdminId(admin);
        if(result>0){
            return R.ok().data("msg"," ").data("img",filename);
        }
        return R.error().data("msg","更新失败");
    }

 解决图片回显问题：

只需在后端添加一个config类即可解决图片回显的问题

@SpringBootConfiguration
public class MyMvcConfig implements WebMvcConfigurer {
	@Override
	public void addResourceHandlers(ResourceHandlerRegistry registry) {

		//registry.addResourceHandler(相对路径)
		//addResourceLocations(绝对路径)
		//System.getProperty("user.dir") 获取当前项目的绝对路径

		//获取文件的真实路径
		String path = System.getProperty("user.dir") + "\\src\\main\\resources\\static\\images\\item\\adminProfilePicture\\";
		String path1 = System.getProperty("user.dir") + "\\src\\main\\resources\\static\\images\\item\\productSinglePicture\\";
		String path2 = System.getProperty("user.dir") + "\\src\\main\\resources\\static\\images\\item\\productDetailsPicture\\";
		String path3 = System.getProperty("user.dir") + "\\src\\main\\resources\\static\\images\\item\\categoryPicture\\";
		String path4 = System.getProperty("user.dir") + "\\src\\main\\resources\\static\\images\\item\\userProfilePicture\\";
		//映射静态资源路径：去static目录下资源，所在在页面上就可以不写static
		registry.addResourceHandler("/images/item/adminProfilePicture/**","/static/**").addResourceLocations("file:" + path);
		registry.addResourceHandler("/static/**","/images/item/productSinglePicture/**").addResourceLocations("file:" + path1);
		registry.addResourceHandler("/static/**","/images/item/productDetailsPicture/**").addResourceLocations("file:" + path2);
		registry.addResourceHandler("/static/**","/images/item/categoryPicture/**").addResourceLocations("file:" + path3);
		registry.addResourceHandler("/static/**","/images/item/userProfilePicture/**").addResourceLocations("file:" + path4);
	}
}