头像，背景图片上传详解

朱雀 2022-03-16 03:44 601阅读 0赞

头像，背景图片上传详解

上传头像和上传背景图片的思路都是一样的，所以这里选讲一下上传头像就行。

上传头像页面样式：
在这里插入图片描述

上传头像主要分成两大部分：

  1. 上传后，将图片存储在本地项目中，然后将图片的url存储到数据库里面，这样以后就可以根据数据库的地址来加载图片了。
  2. 图片剪切功能，图片的剪切功能是使用了jquery的开源插件cropper。这个你百度一下就可以去github里面看到了。

当你截取好图片点击上传时，前端页面会将你截取的图片转化为二进制字符串流，再发送给后端，后端先接收二进制字符串流，将其存储下来，然后将存储的路径保存到数据库即可。

html代码：

  1. <html xmlns:th="http://www.thymeleaf.org">
  2. <head th:include="lay :: htmlhead" th:with="title='favorites'">
  3. </head>
  4. <body>
  5. <script src="http://code.jquery.com/jquery-latest.js"></script>
  6. <script th:src="@{/vendor/toastr/toastr.min.js}"></script>
  7. <section>
  8.     <link rel="stylesheet" th:href="@{/vendor/cropper/cropper.min.css}" />
  9.     <div class="content-wrapper">
  10.         <h3>
  11.             上传头像
  12.             <small>选择一个心仪的头像代表自己</small>
  13.         </h3>
  14.         <div class="container-fluid">
  15.             <div class="row">
  16.                 <div class="col-lg-3 col-md-3">
  17.                     <div class="panel">
  18.                         <div class="panel-heading">
  19.                             请选择一张图片
  20.                         </div>
  21.                         <div class="panel-body">
  22.                             <div class="form-group">
  23.                                 <input id="cropper-file" type="file" class="form-control" style="position: absolute; clip: rect(0px, 0px, 0px, 0px);"/>
  24.                                 <div class="bootstrap-filestyle input-group">
  25.                                     <input id="cropper-file-url" type="text" class="form-control" disabled=""/>
  26.                                     <span class="group-span-filestyle input-group-btn">
  27.                                     <label for="cropper-file" class="btn btn-default"> <!-- 使用for绑定前面的表单元素input，这样点击label就可以实现操作input-->
  28.                                        <span class="fa fa-folder-open text-muted"></span>
  29.                                     </label>
  30.                                  </span>
  31.                                 </div>
  32.                             </div>
  33.                             <br />
  34.                             <div id="cropper-preview" class="cropper-preview" data-text="截取的图像"></div>
  35.                         </div>
  36.                     </div>
  37.                     <button id="cropper-submit" class="btn btn-primary btn-block" disabled="disabled" type="submit">提交</button>
  38.                 </div>
  39.                 <div class="col-lg-9 col-md-9">
  40.                     <div class="panel">
  41.                         <div class="panel-body">
  42.                             <div class="cropper-area">
  43.                                 <img id="cropper-image" src="" alt=""/></div>
  44.                         </div>
  45.                     </div>
  46.                 </div>
  47.             </div>
  48.         </div>
  49.     </div>
  50. </section>
  51. <script th:src="@{/vendor/cropper/cropper.min.js}"></script>
  52. <script>
  53.     $(function(){
  54.         $("body").removeClass("offsidebar-open");
  56.         var $cropperImage = $('#cropper-image');
  57.         var $cropperFile = $('#cropper-file');
  58.         var $cropperFileUrl = $('#cropper-file-url');
  59.         var $cropperSubmit = $('#cropper-submit');
  60.         var $cropperPreview = $('.cropper-preview');
  61.         var URL = window.URL || window.webkitURL;
  62.         var blobURL;
  63.         var croppable = false;
  65.        // alert("变量初始化结束  "+URL);
  66.         $cropperSubmit.prop('disabled', true); //设置disable的属性为true
  68.         //jquery 图片剪辑设置
  69.         $cropperImage.cropper({
  70.             aspectRatio: 1 / 1,
  71.             viewMode: 1,
  72.             preview: $cropperPreview,
  73.             background: false,
  74.             mouseWheelZoom: false,
  75.             built: function () {
  76.                 croppable = true;
  77.             }
  78.         });
  79.         //alert("剪辑图片设置结束");
  81.         if(URL){
  82.             //当cropperFile发生变化时，进行改变
  83.             $cropperFile.change(function(){
  84.                 var files = this.files;
  85.                 var file;
  86.                 if(!$cropperImage.data('cropper')){ //取出名为cropper的数据
  87.                     return;
  88.                 }
  89.                 //alert($cropperImage.data('cropper'));
  90.                 if(files && files.length){
  91.                     file = files[0];
  92.                     if(/^image\/\w+$/.test(file.type)){
  93.                         blobURL = URL.createObjectURL(file);
  94.                         $cropperFileUrl.val($cropperFile.val());
  95.                         $cropperSubmit.prop('disabled', false);
  96.                         $cropperImage.one('built.cropper', function(){ //给选中的元素附加事件
  97.                             URL.revokeObjectURL(blobURL);//释放路径
  98.                         }).cropper('reset').cropper('replace', blobURL);
  99.                         $cropperFile.val('');
  100.                     }else{
  101.                         window.alert('请选择一个图像文件。');
  102.                     }
  103.                 }
  104.             });
  105.         }else{
  106.             $cropperFile.prop('disabled', true);
  107.         }
  109.         function getrectangleCanvas(sourceCanvas){
  110.             var canvas = document.createElement('canvas');
  111.             var context = canvas.getContext('2d');
  112.             var width = 200;
  113.             var height = 200;
  115.             canvas.width = width;
  116.             canvas.height = height;
  117.             context.beginPath();
  118.             context.rect(0, 0, width, height);
  119.             context.strokeStyle = 'rgba(0,0,0,0)';
  120.             context.stroke();
  121.             context.clip();
  122.             context.drawImage(sourceCanvas, 0, 0, width, height);
  124.             return canvas;
  125.         }
  127.         $cropperSubmit.on('click', function(){
  128.             var croppedCanvas;
  129.             var rectangleCanvas;
  130.             if(!croppable){
  131.                 return;
  132.             }
  133.             croppedCanvas = $cropperImage.cropper('getCroppedCanvas');
  134.             rectangleCanvas = getrectangleCanvas(croppedCanvas);
  135.             var dataUrl = rectangleCanvas.toDataURL("image/png").replace(/\+/g,'%2B');
  136.             $.ajax({
  137.                 url : '/uploadHeadPortrait',
  138.                 data : 'dataUrl='+dataUrl,
  139.                 async:  false,  //发送同步请求，其他事件必须等待
  140.                 type : 'POST',
  141.                 dataType : "json",
  142.                 error : function(XMLHttpRequest, textStatus, errorThrown) {
  143.                 },
  144.                 success: function(response){
  145.                     if(response.rspCode == '000000'){
  146.                         $("#leftProfilePicture").attr("src",response.data);
  147.                         $cropperFile.prop('disabled', true);
  148.                         $cropperSubmit.prop('disabled', true);
  149.                         $(".cropper-area .cropper-container").hide(); //上传成功以后，隐藏显示的图片
  150.                         toastr.success('头像上传成功！', '操作成功');//jQuery提示插件
  151.                     }else{
  152.                         toastr.error(response.rspMsg, '操作失败');
  153.                     }
  154.                 },
  155.                 error: function(XmlHttpRequest, textStatus, errorThrown){
  156.                     console.log(XMLHttpRequest);
  157.                     console.log(textStatus);
  158.                     console.log(errorThrown);
  159.                 }
  160.             });
  161.         });
  162.     });
  163.     /*]]>*/
  164. </script>
  165. </body>
  166. </html>

后端代码其实很简单，只需要将前端数据接收就行。

  1. @RequestMapping("/uploadHeadPortrait")
  2.     public ResponseData uploadHeadPortrait(HttpServletRequest request,String dataUrl){ 
  3.         try { 
  4.             System.out.println("11");
  5.             String filePath = "C:\\Users\\Administrator\\Documents\\GitHub\\forum\\forum\\src\\main\\resources\\static\\userImage\\";
  6.             //这里的路径需要是绝对路径，如果填了"./resource/static/userImage",那么图片就会存储到idea内置的tomcat中
  7.             String fileName = UUID.randomUUID().toString() + ".png";//指定为png格式,给图片随机起一个名字
  8.             String image = dataUrl;
  9.             String savePath = "userImage/"+fileName;
  10.             String header = "data:image";
  11.             String[] imageArr = image.split(",");
  12.             if (imageArr[0].contains(header)) { 
  13.                 image = imageArr[1];
  14.                 Base64.Decoder decoder = Base64.getDecoder();
  15.                 byte[] decodedBytes = decoder.decode(image);
  16.                 FileUtil.uploadFile(decodedBytes, filePath, fileName);
  17.                 //FileUtil是新写的一个类，代码在后面.
  18.                 System.out.println("保存结束");
  19.                 User user = getSessionUser(request);
  20.                 if(user==null){ 
  21.                     return new ResponseData(ExceptionMsg.FAILED);
  22.                 }
  23.                 userServiceImp.updateUserPhoto(savePath,user.getUserId());//存储头像路径
  24.                 user.setPhoto(savePath);
  25.                 System.out.println(user);
  26.                 setSessionUser(request,user);
  27.             }
  28.             System.out.println("头像地址"+savePath);
  29.             System.out.println("上传结束");
  30.             return new ResponseData(ExceptionMsg.SUCCESS,savePath);
  31.         }
  32.         catch (Exception e){ 
  33.             System.out.println("错误");
  34.             return new ResponseData(ExceptionMsg.FAILED);
  35.         }
  36.     }

其实找到这里，并没有结束，因为你会发现，刚刚上传完的图片不能立即显示，需要你重启springboot项目才能显示。此时网页上会显示404图片无法加载。
原因是你将图片放在了static下面 ，而这个时候项目没有重新扫描static，所以是加载不了的。
你需要写一个配置类：

  1. package com.example.demo.web;
  3. import org.springframework.context.annotation.Configuration;
  4. import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
  5. import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
  7. /** * @ClassName MyPicConfig * @Description TODO * @Auther ydc * @Date 2019/2/14 17:36 * @Version 1.0 **/
  8. //新增加一个类用来添加虚拟路径映射
  9. @Configuration
  10. public class MyPicConfig implements WebMvcConfigurer { 
  12.     @Override
  13.     public void addResourceHandlers(ResourceHandlerRegistry registry) { 
  14.         registry.addResourceHandler("/userImage/**").addResourceLocations("file:C:\\Users\\Administrator\\Documents\\GitHub\\forum\\forum\\src\\main\\resources\\static\\userImage\\");
  15.        registry.addResourceHandler("/userBg/**").addResourceLocations("file:C:\\Users\\Administrator\\Documents\\GitHub\\forum\\forum\\src\\main\\resources\\static\\userBg\\");
  16. //addResourceHandler()是将相对路径填进来，"/userImage/**"表示static下面的userImag里面的全部内容，都映射到绝对路径为"C:\\Users\\Administrator\\Documents\\GitHub\\forum\\forum\\src\\main\\resources\\static\\userBg\\"的文件夹里面去查找，这样就可以立即找到了。
  17. //我这里之所以用来两次是因为我上传头像和背景图的文件夹不是同一个，所以分别映射了两次。注意:file必须要加！！
  18.     }
  19. }

FileUtil类：

  1. package com.example.demo.utils;
  3. /** * @ClassName FileUtil * @Description TODO * @Auther ydc * @Date 2019/1/12 19:31 * @Version 1.0 **/
  4. import java.io.File;
  5. import java.io.FileOutputStream;
  7. /** * . */
  8. public class FileUtil{ 
  10.     /** * 获取文件类型 * @param fileName * @return */
  11.     public static String getFileExtName(String fileName) { 
  12.         if (fileName!=null ) { 
  13.             int i = fileName.lastIndexOf('.');
  14.             if (i>-1) { 
  15.                 return fileName.substring(i+1).toLowerCase();
  16.             }else { 
  17.                 return null;
  18.             }
  19.         }else { 
  20.             return null;
  21.         }
  22.     }
  23.     //文件上传工具类服务方法
  25.     public static void uploadFile(byte[] file, String filePath, String fileName) throws Exception{ 
  27.         File targetFile = new File(filePath);
  28.         if(!targetFile.exists()){ 
  29.             targetFile.mkdirs();
  30.         }
  31.         FileOutputStream out = new FileOutputStream(filePath+fileName);
  32.         out.write(file);
  33.         out.flush();
  34.         out.close();
  35.     }
  36. }

这次的代码有点多，文字有点少，主要是因为这部分基本都是像模板一样使用。

GitHub
项目演示

发表评论

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

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

相关阅读

    相关 图片上传方案详解

    > 小编推荐：[Fundebug][]专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公

    桃扇骨桃扇骨/ 0 赞/ 360 阅读

    相关 头像，背景图片上传详解

    头像，背景图片上传详解 上传头像和上传背景图片的思路都是一样的，所以这里选讲一下上传头像就行。 上传头像页面样式： ![在这里插入图片描述][watermark_

    朱雀朱雀/ 0 赞/ 602 阅读