springboot项目修改个人头像

喜欢ヅ旅行 2022-09-09 02:10 403阅读 0赞

#

    • 1.配置类
    • 2.文件上传工具类
    • 3.前端页面
    • 4.控制层：

1.配置类

  1. # 项目相关配置
  2. ruoyi:
  3.   # 名称
  4.   name: RuoYi
  5.   # 版本
  6.   version: 4.6.2
  7.   # 版权年份
  8.   copyrightYear: 2021
  9.   # 实例演示开关
  10.   demoEnabled: true
  11.   # 文件路径 示例（ Windows配置D:/ruoyi/uploadPath，Linux配置 /home/ruoyi/uploadPath）
  12.   profile: C:\Users\14172\AppData\Local
  13.   # 获取ip地址开关
  14.   addressEnabled: false
  16. /** * 全局配置类 * * @author ruoyi */
  17. @Component
  18. @ConfigurationProperties(prefix = "ruoyi")
  19. public class RuoYiConfig
  20. { 
  21.     /** 项目名称 */
  22.     private static String name;
  24.     /** 版本 */
  25.     private static String version;
  27.     /** 版权年份 */
  28.     private static String copyrightYear;
  30.     /** 实例演示开关 */
  31.     private static boolean demoEnabled;
  33.     /** 上传路径 */
  34.     private static String profile;
  36.     /** 获取地址开关 */
  37.     private static boolean addressEnabled;
  39.     public static String getName()
  40.     { 
  41.         return name;
  42.     }
  44.     public void setName(String name)
  45.     { 
  46.         RuoYiConfig.name = name;
  47.     }
  49.     public static String getVersion()
  50.     { 
  51.         return version;
  52.     }
  54.     public void setVersion(String version)
  55.     { 
  56.         RuoYiConfig.version = version;
  57.     }
  59.     public static String getCopyrightYear()
  60.     { 
  61.         return copyrightYear;
  62.     }
  64.     public void setCopyrightYear(String copyrightYear)
  65.     { 
  66.         RuoYiConfig.copyrightYear = copyrightYear;
  67.     }
  69.     public static boolean isDemoEnabled()
  70.     { 
  71.         return demoEnabled;
  72.     }
  74.     public void setDemoEnabled(boolean demoEnabled)
  75.     { 
  76.         RuoYiConfig.demoEnabled = demoEnabled;
  77.     }
  79.     public static String getProfile()
  80.     { 
  81.         return profile;
  82.     }
  84.     public void setProfile(String profile)
  85.     { 
  86.         RuoYiConfig.profile = profile;
  87.     }
  89.     public static boolean isAddressEnabled()
  90.     { 
  91.         return addressEnabled;
  92.     }
  94.     public void setAddressEnabled(boolean addressEnabled)
  95.     { 
  96.         RuoYiConfig.addressEnabled = addressEnabled;
  97.     }
  99.     /** * 获取导入上传路径 */
  100.     public static String getImportPath()
  101.     { 
  102.         return getProfile() + "/import";
  103.     }
  105.     /** * 获取头像上传路径 */
  106.     public static String getAvatarPath()
  107.     { 
  108.         return getProfile() + "/avatar";
  109.     }
  111.     /** * 获取下载路径 */
  112.     public static String getDownloadPath()
  113.     { 
  114.         return getProfile() + "/download/";
  115.     }
  117.     /** * 获取上传路径 */
  118.     public static String getUploadPath()
  119.     { 
  120.         return getProfile() + "/upload";
  121.     }
  122. }

2.文件上传工具类

  1. /** * 文件上传工具类 * * @author ruoyi */
  2. public class FileUploadUtils
  3. { 
  4.     /** * 默认大小 50M */
  5.     public static final long DEFAULT_MAX_SIZE = 50 * 1024 * 1024;
  7.     /** * 默认的文件名最大长度 100 */
  8.     public static final int DEFAULT_FILE_NAME_LENGTH = 100;
  10.     /** * 默认上传的地址 */
  11.     private static String defaultBaseDir = RuoYiConfig.getProfile();
  13.     public static void setDefaultBaseDir(String defaultBaseDir)
  14.     { 
  15.         FileUploadUtils.defaultBaseDir = defaultBaseDir;
  16.     }
  18.     public static String getDefaultBaseDir()
  19.     { 
  20.         return defaultBaseDir;
  21.     }
  23.     /** * 以默认配置进行文件上传 * * @param file 上传的文件 * @return 文件名称 * @throws Exception */
  24.     public static final String upload(MultipartFile file) throws IOException
  25.     { 
  26.         try
  27.         { 
  28.             return upload(getDefaultBaseDir(), file, MimeTypeUtils.DEFAULT_ALLOWED_EXTENSION);
  29.         }
  30.         catch (Exception e)
  31.         { 
  32.             throw new IOException(e.getMessage(), e);
  33.         }
  34.     }
  36.     /** * 根据文件路径上传 * * @param baseDir 相对应用的基目录 * @param file 上传的文件 * @return 文件名称 * @throws IOException */
  37.     public static final String upload(String baseDir, MultipartFile file) throws IOException
  38.     { 
  39.         try
  40.         { 
  41.             return upload(baseDir, file, MimeTypeUtils.DEFAULT_ALLOWED_EXTENSION);
  42.         }
  43.         catch (Exception e)
  44.         { 
  45.             throw new IOException(e.getMessage(), e);
  46.         }
  47.     }
  49.     /** * 文件上传 * * @param baseDir 相对应用的基目录 * @param file 上传的文件 * @param allowedExtension 上传文件类型 * @return 返回上传成功的文件名 * @throws FileSizeLimitExceededException 如果超出最大大小 * @throws FileNameLengthLimitExceededException 文件名太长 * @throws IOException 比如读写文件出错时 * @throws InvalidExtensionException 文件校验异常 */
  50.     public static final String upload(String baseDir, MultipartFile file, String[] allowedExtension)
  51.             throws FileSizeLimitExceededException, IOException, FileNameLengthLimitExceededException,
  52.             InvalidExtensionException
  53.     { 
  54.         int fileNamelength = file.getOriginalFilename().length();
  55.         if (fileNamelength > FileUploadUtils.DEFAULT_FILE_NAME_LENGTH)
  56.         { 
  57.             throw new FileNameLengthLimitExceededException(FileUploadUtils.DEFAULT_FILE_NAME_LENGTH);
  58.         }
  60.         assertAllowed(file, allowedExtension);
  62.         String fileName = extractFilename(file);
  64.         File desc = getAbsoluteFile(baseDir, fileName);
  65.         file.transferTo(desc);
  66.         String pathFileName = getPathFileName(baseDir, fileName);
  67.         return pathFileName;
  68.     }
  70.     /** * 编码文件名 */
  71.     public static final String extractFilename(MultipartFile file)
  72.     { 
  73.         String fileName = file.getOriginalFilename();
  74.         String extension = getExtension(file);
  75.         fileName = DateUtils.datePath() + "/" + IdUtils.fastUUID() + "." + extension;
  76.         return fileName;
  77.     }
  79.     public static final File getAbsoluteFile(String uploadDir, String fileName) throws IOException
  80.     { 
  81.         File desc = new File(uploadDir + File.separator + fileName);
  83.         if (!desc.exists())
  84.         { 
  85.             if (!desc.getParentFile().exists())
  86.             { 
  87.                 desc.getParentFile().mkdirs();
  88.             }
  89.         }
  90.         return desc;
  91.     }
  93.     public static final String getPathFileName(String uploadDir, String fileName) throws IOException
  94.     { 
  95.         int dirLastIndex = RuoYiConfig.getProfile().length() + 1;
  96.         String currentDir = StringUtils.substring(uploadDir, dirLastIndex);
  97.         String pathFileName = Constants.RESOURCE_PREFIX + "/" + currentDir + "/" + fileName;
  98.         return pathFileName;
  99.     }
  101.     /** * 文件大小校验 * * @param file 上传的文件 * @return * @throws FileSizeLimitExceededException 如果超出最大大小 * @throws InvalidExtensionException */
  102.     public static final void assertAllowed(MultipartFile file, String[] allowedExtension)
  103.             throws FileSizeLimitExceededException, InvalidExtensionException
  104.     { 
  105.         long size = file.getSize();
  106.         if (DEFAULT_MAX_SIZE != -1 && size > DEFAULT_MAX_SIZE)
  107.         { 
  108.             throw new FileSizeLimitExceededException(DEFAULT_MAX_SIZE / 1024 / 1024);
  109.         }
  111.         String fileName = file.getOriginalFilename();
  112.         String extension = getExtension(file);
  113.         if (allowedExtension != null && !isAllowedExtension(extension, allowedExtension))
  114.         { 
  115.             if (allowedExtension == MimeTypeUtils.IMAGE_EXTENSION)
  116.             { 
  117.                 throw new InvalidExtensionException.InvalidImageExtensionException(allowedExtension, extension,
  118.                         fileName);
  119.             }
  120.             else if (allowedExtension == MimeTypeUtils.FLASH_EXTENSION)
  121.             { 
  122.                 throw new InvalidExtensionException.InvalidFlashExtensionException(allowedExtension, extension,
  123.                         fileName);
  124.             }
  125.             else if (allowedExtension == MimeTypeUtils.MEDIA_EXTENSION)
  126.             { 
  127.                 throw new InvalidExtensionException.InvalidMediaExtensionException(allowedExtension, extension,
  128.                         fileName);
  129.             }
  130.             else if (allowedExtension == MimeTypeUtils.VIDEO_EXTENSION)
  131.             { 
  132.                 throw new InvalidExtensionException.InvalidVideoExtensionException(allowedExtension, extension,
  133.                         fileName);
  134.             }
  135.             else
  136.             { 
  137.                 throw new InvalidExtensionException(allowedExtension, extension, fileName);
  138.             }
  139.         }
  140.     }
  142.     /** * 判断MIME类型是否是允许的MIME类型 * * @param extension * @param allowedExtension * @return */
  143.     public static final boolean isAllowedExtension(String extension, String[] allowedExtension)
  144.     { 
  145.         for (String str : allowedExtension)
  146.         { 
  147.             if (str.equalsIgnoreCase(extension))
  148.             { 
  149.                 return true;
  150.             }
  151.         }
  152.         return false;
  153.     }
  155.     /** * 获取文件名的后缀 * * @param file 表单文件 * @return 后缀名 */
  156.     public static final String getExtension(MultipartFile file)
  157.     { 
  158.         String extension = FilenameUtils.getExtension(file.getOriginalFilename());
  159.         if (StringUtils.isEmpty(extension))
  160.         { 
  161.             extension = MimeTypeUtils.getExtension(file.getContentType());
  162.         }
  163.         return extension;
  164.     }
  165. }

3.前端页面

  1. <body class="white-bg">
  2.     <div class="row container">
  3.         <div class="col-md-10">
  4.             <div class="imageBox">
  5.                 <img id="avatar" th:src="(${#strings.isEmpty(user.avatar)}) ? @{/img/profile.jpg} : @{${user.avatar}}" th:onerror="'this.src=\'' + @{ '/img/profile.jpg'} + '\''">
  6.             </div>
  7.             <div class="action">
  8.                 <div class="new-contentarea tc">
  9.                     <a href="javascript:void(0)" class="upload-img"><label for="inputImage">上传图像</label> </a>
  10.                     <input type="file" name="avatar" id="inputImage" accept="image/*"/>
  11.                 </div>
  12.                 <button type="button" class="btn-custom" data-method="zoom" data-option="0.1"><i class="fa fa-search-plus"></i></button>
  13.                 <button type="button" class="btn-custom" data-method="zoom" data-option="-0.1"><i class="fa fa-search-minus"></i></button>
  14.                 <button type="button" class="btn-custom" data-method="rotate" data-option="-45"><i class="fa fa-rotate-left"></i></button>
  15.                 <button type="button" class="btn-custom" data-method="rotate" data-option="45"><i class="fa fa-rotate-right"></i></button>
  16.                 <button type="button" class="btn-custom" data-method="scaleX" data-option="-1"><i class="fa fa-arrows-h"></i></button>
  17.                 <button type="button" class="btn-custom" data-method="scaleY" data-option="-1"><i class="fa fa-arrows-v"></i></button>
  18.                 <button type="button" class="btn-custom" data-method="reset"><i class="fa fa-refresh"></i></button>
  19.             </div>
  20.         </div>
  21.         <div class="col-md-2">
  22.             <div class="cropped">
  23.                 <div class="preview-box">
  24.                     <div class="img-preview preview-xs"></div>
  25.                 </div>
  26.                 <div class="preview-box">
  27.                     <div class="img-preview preview-sm"></div>
  28.                 </div>
  29.                 <div class="preview-box">
  30.                     <div class="img-preview preview-md"></div>
  31.                 </div>
  32.             </div>
  33.         </div>
  34.     </div>
  35. <script type="text/javascript"> var cropper; var croppable = false; $(window).load(function() { var image = document.getElementById('avatar'); cropper = new Cropper(image, { aspectRatio: 1, viewMode: 1, autoCropArea: 0.9, preview: '.img-preview', ready: function () { croppable = true; } }) $('#inputImage').on('change', function() { var reader = new FileReader(); var file = $('#inputImage')[0].files[0]; if (/^image\/\w+$/.test(file.type)) { reader.onload = function(e) { if(croppable){ cropper.replace(e.target.result) } } reader.readAsDataURL(this.files[0]); } else { $.modal.alertWarning('请选择一个图片文件。'); } }); $('.btn-custom').on('click',function (e) { if (!croppable) { $.modal.alertWarning("裁剪框加载中,请稍后..."); return; } var data = { method: $(this).data('method'), option: $(this).data('option') || undefined, }; var result = cropper[data.method](data.option, data.secondOption); if(['scaleX','scaleY'].indexOf(data.method) !== -1){ $(this).data('option', -data.option) } }) }); function submitHandler() { if (!croppable) { $.modal.alertWarning("裁剪框加载中,请稍后..."); return } cropper.getCroppedCanvas().toBlob(function(img) { var formdata = new FormData(); formdata.append("avatarfile", img); $.ajax({ url: ctx + "system/user/profile/updateAvatar", data: formdata, type: "post", processData: false, contentType: false, success: function(result) { $.operate.saveSuccess(result); } }) }); } $(window).resize(function() { $('.imageBox').height($(window).height() - 80); $('.cropped').height($(window).height() - 40); }).resize(); if (!HTMLCanvasElement.prototype.toBlob) { Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', { value: function(callback, type, quality) { var canvas = this; setTimeout(function() { var binStr = atob(canvas.toDataURL(type, quality).split(',')[1]); var len = binStr.length; var arr = new Uint8Array(len); for (var i = 0; i < len; i++) { arr[i] = binStr.charCodeAt(i); } callback(new Blob([arr], { type: type || 'image/png' })); }); } }); } </script>
  36. </body>

4.控制层：

  1. @PostMapping("/updateAvatar")
  2.     @ResponseBody
  3.     public AjaxResult updateAvatar(@RequestParam("avatarfile") MultipartFile file)
  4.     { 
  5.         SysUser currentUser = getSysUser();
  6.         try
  7.         { 
  8.             if (!file.isEmpty())
  9.             { 
  10.                 System.out.println(RuoYiConfig.getAvatarPath());
  11.                 String avatar = FileUploadUtils.upload(RuoYiConfig.getAvatarPath(), file);
  12.                 currentUser.setAvatar(avatar);
  13.                 if (userService.updateUserInfo(currentUser) > 0)
  14.                 { 
  15.                     setSysUser(userService.selectUserById(currentUser.getUserId()));
  16.                     return success();
  17.                 }
  18.             }
  19.             return error();
  20.         }
  21.         catch (Exception e)
  22.         { 
  23.             log.error("修改头像失败！", e);
  24.             return error(e.getMessage());
  25.         }
  26.     }

效果
在这里插入图片描述
在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，403人围观）

还没有评论，来说两句吧...

相关阅读

    相关 layui修改头像功能

    前言 场景大概是用户点击修改头像，会显示一个弹出框，展示当前系统所有图片，用户选择了一张之后，就会覆盖原有的那一张，注意，不能照搬，要自己调试修改的，因为每个公司重新都封

    梦里梦外;梦里梦外;/ 0 赞/ 82 阅读

    相关 uniapp修改头像

    以下将是 uniapp 借用七牛云修改头像的代码，但是其他也可借鉴，原理相同，局部更改即可。 以下代码用到的地址皆为七牛云的地址，上传图片很方便，会给你返回图片地址，个人用

    短命女短命女/ 0 赞/ 157 阅读