springboot项目修改个人头像

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

###  ###

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

## 1.配置类 ##

# 项目相关配置
    ruoyi:
      # 名称
      name: RuoYi
      # 版本
      version: 4.6.2
      # 版权年份
      copyrightYear: 2021
      # 实例演示开关
      demoEnabled: true
      # 文件路径 示例（ Windows配置D:/ruoyi/uploadPath，Linux配置 /home/ruoyi/uploadPath）
      profile: C:\Users\14172\AppData\Local
      # 获取ip地址开关
      addressEnabled: false

/** * 全局配置类 * * @author ruoyi */
    @Component
    @ConfigurationProperties(prefix = "ruoyi")
    public class RuoYiConfig
    { 
        /** 项目名称 */
        private static String name;
    
        /** 版本 */
        private static String version;
    
        /** 版权年份 */
        private static String copyrightYear;
    
        /** 实例演示开关 */
        private static boolean demoEnabled;
    
        /** 上传路径 */
        private static String profile;
    
        /** 获取地址开关 */
        private static boolean addressEnabled;
    
        public static String getName()
        { 
            return name;
        }
    
        public void setName(String name)
        { 
            RuoYiConfig.name = name;
        }
    
        public static String getVersion()
        { 
            return version;
        }
    
        public void setVersion(String version)
        { 
            RuoYiConfig.version = version;
        }
    
        public static String getCopyrightYear()
        { 
            return copyrightYear;
        }
    
        public void setCopyrightYear(String copyrightYear)
        { 
            RuoYiConfig.copyrightYear = copyrightYear;
        }
    
        public static boolean isDemoEnabled()
        { 
            return demoEnabled;
        }
    
        public void setDemoEnabled(boolean demoEnabled)
        { 
            RuoYiConfig.demoEnabled = demoEnabled;
        }
    
        public static String getProfile()
        { 
            return profile;
        }
    
        public void setProfile(String profile)
        { 
            RuoYiConfig.profile = profile;
        }
    
        public static boolean isAddressEnabled()
        { 
            return addressEnabled;
        }
    
        public void setAddressEnabled(boolean addressEnabled)
        { 
            RuoYiConfig.addressEnabled = addressEnabled;
        }
    
        /** * 获取导入上传路径 */
        public static String getImportPath()
        { 
            return getProfile() + "/import";
        }
    
        /** * 获取头像上传路径 */
        public static String getAvatarPath()
        { 
            return getProfile() + "/avatar";
        }
    
        /** * 获取下载路径 */
        public static String getDownloadPath()
        { 
            return getProfile() + "/download/";
        }
    
        /** * 获取上传路径 */
        public static String getUploadPath()
        { 
            return getProfile() + "/upload";
        }
    }

## 2.文件上传工具类 ##

/** * 文件上传工具类 * * @author ruoyi */
    public class FileUploadUtils
    { 
        /** * 默认大小 50M */
        public static final long DEFAULT_MAX_SIZE = 50 * 1024 * 1024;
    
        /** * 默认的文件名最大长度 100 */
        public static final int DEFAULT_FILE_NAME_LENGTH = 100;
    
        /** * 默认上传的地址 */
        private static String defaultBaseDir = RuoYiConfig.getProfile();
    
        public static void setDefaultBaseDir(String defaultBaseDir)
        { 
            FileUploadUtils.defaultBaseDir = defaultBaseDir;
        }
    
        public static String getDefaultBaseDir()
        { 
            return defaultBaseDir;
        }
    
        /** * 以默认配置进行文件上传 * * @param file 上传的文件 * @return 文件名称 * @throws Exception */
        public static final String upload(MultipartFile file) throws IOException
        { 
            try
            { 
                return upload(getDefaultBaseDir(), file, MimeTypeUtils.DEFAULT_ALLOWED_EXTENSION);
            }
            catch (Exception e)
            { 
                throw new IOException(e.getMessage(), e);
            }
        }
    
        /** * 根据文件路径上传 * * @param baseDir 相对应用的基目录 * @param file 上传的文件 * @return 文件名称 * @throws IOException */
        public static final String upload(String baseDir, MultipartFile file) throws IOException
        { 
            try
            { 
                return upload(baseDir, file, MimeTypeUtils.DEFAULT_ALLOWED_EXTENSION);
            }
            catch (Exception e)
            { 
                throw new IOException(e.getMessage(), e);
            }
        }
    
        /** * 文件上传 * * @param baseDir 相对应用的基目录 * @param file 上传的文件 * @param allowedExtension 上传文件类型 * @return 返回上传成功的文件名 * @throws FileSizeLimitExceededException 如果超出最大大小 * @throws FileNameLengthLimitExceededException 文件名太长 * @throws IOException 比如读写文件出错时 * @throws InvalidExtensionException 文件校验异常 */
        public static final String upload(String baseDir, MultipartFile file, String[] allowedExtension)
                throws FileSizeLimitExceededException, IOException, FileNameLengthLimitExceededException,
                InvalidExtensionException
        { 
            int fileNamelength = file.getOriginalFilename().length();
            if (fileNamelength > FileUploadUtils.DEFAULT_FILE_NAME_LENGTH)
            { 
                throw new FileNameLengthLimitExceededException(FileUploadUtils.DEFAULT_FILE_NAME_LENGTH);
            }
    
            assertAllowed(file, allowedExtension);
    
            String fileName = extractFilename(file);
    
            File desc = getAbsoluteFile(baseDir, fileName);
            file.transferTo(desc);
            String pathFileName = getPathFileName(baseDir, fileName);
            return pathFileName;
        }
    
        /** * 编码文件名 */
        public static final String extractFilename(MultipartFile file)
        { 
            String fileName = file.getOriginalFilename();
            String extension = getExtension(file);
            fileName = DateUtils.datePath() + "/" + IdUtils.fastUUID() + "." + extension;
            return fileName;
        }
    
        public static final File getAbsoluteFile(String uploadDir, String fileName) throws IOException
        { 
            File desc = new File(uploadDir + File.separator + fileName);
    
            if (!desc.exists())
            { 
                if (!desc.getParentFile().exists())
                { 
                    desc.getParentFile().mkdirs();
                }
            }
            return desc;
        }
    
        public static final String getPathFileName(String uploadDir, String fileName) throws IOException
        { 
            int dirLastIndex = RuoYiConfig.getProfile().length() + 1;
            String currentDir = StringUtils.substring(uploadDir, dirLastIndex);
            String pathFileName = Constants.RESOURCE_PREFIX + "/" + currentDir + "/" + fileName;
            return pathFileName;
        }
    
        /** * 文件大小校验 * * @param file 上传的文件 * @return * @throws FileSizeLimitExceededException 如果超出最大大小 * @throws InvalidExtensionException */
        public static final void assertAllowed(MultipartFile file, String[] allowedExtension)
                throws FileSizeLimitExceededException, InvalidExtensionException
        { 
            long size = file.getSize();
            if (DEFAULT_MAX_SIZE != -1 && size > DEFAULT_MAX_SIZE)
            { 
                throw new FileSizeLimitExceededException(DEFAULT_MAX_SIZE / 1024 / 1024);
            }
    
            String fileName = file.getOriginalFilename();
            String extension = getExtension(file);
            if (allowedExtension != null && !isAllowedExtension(extension, allowedExtension))
            { 
                if (allowedExtension == MimeTypeUtils.IMAGE_EXTENSION)
                { 
                    throw new InvalidExtensionException.InvalidImageExtensionException(allowedExtension, extension,
                            fileName);
                }
                else if (allowedExtension == MimeTypeUtils.FLASH_EXTENSION)
                { 
                    throw new InvalidExtensionException.InvalidFlashExtensionException(allowedExtension, extension,
                            fileName);
                }
                else if (allowedExtension == MimeTypeUtils.MEDIA_EXTENSION)
                { 
                    throw new InvalidExtensionException.InvalidMediaExtensionException(allowedExtension, extension,
                            fileName);
                }
                else if (allowedExtension == MimeTypeUtils.VIDEO_EXTENSION)
                { 
                    throw new InvalidExtensionException.InvalidVideoExtensionException(allowedExtension, extension,
                            fileName);
                }
                else
                { 
                    throw new InvalidExtensionException(allowedExtension, extension, fileName);
                }
            }
        }
    
        /** * 判断MIME类型是否是允许的MIME类型 * * @param extension * @param allowedExtension * @return */
        public static final boolean isAllowedExtension(String extension, String[] allowedExtension)
        { 
            for (String str : allowedExtension)
            { 
                if (str.equalsIgnoreCase(extension))
                { 
                    return true;
                }
            }
            return false;
        }
    
        /** * 获取文件名的后缀 * * @param file 表单文件 * @return 后缀名 */
        public static final String getExtension(MultipartFile file)
        { 
            String extension = FilenameUtils.getExtension(file.getOriginalFilename());
            if (StringUtils.isEmpty(extension))
            { 
                extension = MimeTypeUtils.getExtension(file.getContentType());
            }
            return extension;
        }
    }

## 3.前端页面 ##

<body class="white-bg">
    	<div class="row container">
    		<div class="col-md-10">
    			<div class="imageBox">
    				<img id="avatar" th:src="(${#strings.isEmpty(user.avatar)}) ? @{/img/profile.jpg} : @{${user.avatar}}" th:onerror="'this.src=\'' + @{ '/img/profile.jpg'} + '\''">
    			</div>
    			<div class="action">
    				<div class="new-contentarea tc">
    					<a href="javascript:void(0)" class="upload-img"><label for="inputImage">上传图像</label> </a>
    					<input type="file" name="avatar" id="inputImage" accept="image/*"/>
    				</div>
    				<button type="button" class="btn-custom" data-method="zoom" data-option="0.1"><i class="fa fa-search-plus"></i></button>
    				<button type="button" class="btn-custom" data-method="zoom" data-option="-0.1"><i class="fa fa-search-minus"></i></button>
    				<button type="button" class="btn-custom" data-method="rotate" data-option="-45"><i class="fa fa-rotate-left"></i></button>
    				<button type="button" class="btn-custom" data-method="rotate" data-option="45"><i class="fa fa-rotate-right"></i></button>
    				<button type="button" class="btn-custom" data-method="scaleX" data-option="-1"><i class="fa fa-arrows-h"></i></button>
    				<button type="button" class="btn-custom" data-method="scaleY" data-option="-1"><i class="fa fa-arrows-v"></i></button>
    				<button type="button" class="btn-custom" data-method="reset"><i class="fa fa-refresh"></i></button>
    			</div>
    		</div>
    		<div class="col-md-2">
    			<div class="cropped">
    				<div class="preview-box">
    					<div class="img-preview preview-xs"></div>
    				</div>
    				<div class="preview-box">
    					<div class="img-preview preview-sm"></div>
    				</div>
    				<div class="preview-box">
    					<div class="img-preview preview-md"></div>
    				</div>
    			</div>
    		</div>
    	</div>
    <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>
    </body>

## 4.控制层： ##

@PostMapping("/updateAvatar")
        @ResponseBody
        public AjaxResult updateAvatar(@RequestParam("avatarfile") MultipartFile file)
        { 
            SysUser currentUser = getSysUser();
            try
            { 
                if (!file.isEmpty())
                { 
                    System.out.println(RuoYiConfig.getAvatarPath());
                    String avatar = FileUploadUtils.upload(RuoYiConfig.getAvatarPath(), file);
                    currentUser.setAvatar(avatar);
                    if (userService.updateUserInfo(currentUser) > 0)
                    { 
                        setSysUser(userService.selectUserById(currentUser.getUserId()));
                        return success();
                    }
                }
                return error();
            }
            catch (Exception e)
            { 
                log.error("修改头像失败！", e);
                return error(e.getMessage());
            }
        }

效果  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbWFyY2ggb2YgVGltZQ_size_20_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbWFyY2ggb2YgVGltZQ_size_9_color_FFFFFF_t_70_g_se_x_16]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbWFyY2ggb2YgVGltZQ_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/438d8c84c73e4bbea9953d702c973235.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbWFyY2ggb2YgVGltZQ_size_9_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/b5ba45bd59eb4c22bef8cc8c1aceb388.png