La imagen de avatar de Springboot se carga utilizando datos de formulario, y la URL se muestra para devolver la imagen, y el avatar se puede modificar

1. El front end envía el recurso de imagen de avatar a formdata en forma de solicitud de Ajax al back end

1. Para el autor que escribió un error de la tarde, decidió compartir todos los errores encontrados aquí para evitar que todos pisen el pozo como yo. Primero, deje que todos vean el efecto de página, haga clic en la imagen para seleccionar y luego haga clic en cargar Cargue la imagen y depurará la

parte html usted mismo en estilo CSS :

<label class="control-label file">
    <div>
        <img id="userUrl" style="border-radius: 100px;" src="${user.userUrl}">
    </div>
    <input type="file" id="photo">
    <input type="hidden" id="userId" value="${user.userId}">
</label>
<p style="margin-left: 20px;">点击头像选择图片，再点击上传</p>
<input id="changeBtn" class="btn btn-info" value="上传">

parte js:
existen algunas dificultades al usar formdata:

1. contentType: false es para evitar que jQuery maneje contentType, no agregue contentType a multipart / form-data, porque el navegador lo agregará por usted, así que no lo agregue en meta. De lo contrario, aparecerá el límite. . . , El problema de que no se puede encontrar el borde.
2. processData: false es para evitar que jQuery procese los datos en una cadena porque está cargando una imagen

$("#changeBtn").click(function () {
        var formData = new FormData();
        formData.append("photo",$('input#photo')[0].files[0]);
        formData.append("userId",$("#userId").val());//业务需求，需要把图片和用户关联起来
        $.ajax({
            url: "自己上传文件的url",
            type: 'POST',
            contentType: false,
            processData: false,
            data: formData,
            success: function (data) {
                $.alert({
                    title: data.code,
                    content: data.msg,
                });
                $("#userUrl").attr("src", data.userUrl); //使用jquery修改图片的src
            },
            error: function (data) {
                $.alert({
                    title: 'Error',
                    content: '修改头像失败，请稍后重试！',
                });
            }
        });
    });

3. La sección del controlador de fondo

1.controlador, escriba la imagen en el local y envíela de nuevo al frente

	private final String writePath = "F:\\images";   //写入本地保存的绝对路径

    private final String savePath = "/images/";   //写入数据库中的路径

	@RequestMapping(value = "/changePhoto")
    @ResponseBody
    public Map<String,String> changePhoto(@RequestParam MultipartFile photo, @RequestParam Long userId){
        Map<String,String> data = new HashMap<>();
        if (photo.isEmpty()){
            data.put("code","error");
            data.put("msg","上传图片为空！");
            return data;
        }
        //获取MultipartFile文件的后缀
        String suffix = photo.getOriginalFilename().substring(photo.getOriginalFilename().lastIndexOf(".") + 1);
        //限制只能上传三种图片格式,不要使用==，因为他是比较基本数据类型的，String是对象
        if (suffix.equalsIgnoreCase("jpg") ||
                suffix.equalsIgnoreCase("jpeg") ||
                suffix.equalsIgnoreCase("png")){
            OutputStream os = null;
            InputStream inputStream = null;
            String fileName = (userId + "") + System.currentTimeMillis() + ".jpg";
            String userUrl = savePath+fileName;
            try {
                inputStream = photo.getInputStream();
            } catch (IOException e) {
                e.printStackTrace();
            }
            try {
                byte[] bs = new byte[1024];
                int len;
                // 输出的文件流保存到本地文件
                File tempFile = new File(writePath);
                if (!tempFile.exists()) {
                    tempFile.mkdirs();
                }
                os = new FileOutputStream(tempFile.getPath() + File.separator + fileName);
                // 开始读取
                while ((len = inputStream.read(bs)) != -1) {
                    os.write(bs, 0, len);
                }
                os.flush();
                userService.updateUserUserUrl(userId,userUrl);
                System.out.println(userUrl);
                data.put("userUrl",userUrl);
                data.put("code","success");
                data.put("msg","修改头像成功");
                return data;
            } catch (IOException e) {
                e.printStackTrace();
                data.put("code","error");
                data.put("msg","修改头像失败，请稍后重试！");
                return data;
            } catch (Exception e) {
                e.printStackTrace();
                data.put("code","error");
                data.put("msg","修改头像失败，请稍后重试！");
                return data;
            } finally {
                // 完毕，关闭所有链接
                try {
                    os.close();
                    inputStream.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }else {
            data.put("code","error");
            data.put("msg","上传头像格式需要为jpg、jpeg、png！");
            return data;
        }
    }

2. Cree MyWebMvcConfigurer y configure la ruta de asignación de recursos, que usa springboot2.x

@Configuration
public class MyWebAppConfigurer implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/images/**").addResourceLocations("file:F:/images/");
    }
}

3. Entonces puede ver que la modificación es exitosa