• Day88.七牛云: 房源图片、用户头像上传

    目录

    一、七牛云存储

    4.鉴权

     二、开发者中心，上传、删除测试

    1.添加依赖

    2.代码测试 

    3. 封装工具类

    三、房源图片上传

    1. spring mvc 配置上传支持

    2. house/show.html页面添加事件

    3.添加服务器端代码

    4. 上传页面

    四、用户头像上传

    1、用户列表页添加选项

    2、添加服务器端代码

    3、上传页面

    在实际开发中，我们会有很多处理不同功能的服务器。例如：

    应用服务器：负责部署我们的应用

    数据库服务器：运行我们的数据库

    文件服务器：负责存储用户上传文件的服务器

    分服务器处理的目的是让服务器各司其职，从而提高我们项目的运行效率。

    常见的图片存储方案：

    方案一：使用nginx搭建图片服务器

    方案二：使用开源的分布式文件存储系统，例如Fastdfs、HDFS等

    方案三：使用云存储，例如阿里云、==七牛云==等

    一、七牛云存储

    七牛云（隶属于上海七牛信息技术有限公司）是国内领先的以视觉智能和数据智能为核心的企业级云计算服务商，同时也是国内知名智能视频云服务商，累计为 70 多万家企业提供服务，覆盖了国内80%网民。围绕富媒体场景推出了对象存储、融合 CDN 加速、容器云、大数据平台、深度学习平台等产品、并提供一站式智能视频云解决方案。为各行业及应用提供可持续发展的智能视频云生态，帮助企业快速上云，创造更广阔的商业价值。

    官网：七牛云 - 国内领先的企业级云服务商

    1.注册、登录

    要使用七牛云的服务，首先需要注册成为会员。地址：七牛云开发者平台

    2.新建存储空间

     3.查看存储空间信息

    4.鉴权

    Java SDK的所有的功能，都需要合法的授权。授权凭证的签算需要七牛账号下的一对==有效的Access Key和Secret Key==，这对密钥可以在七牛云管理控制台的个人中心（七牛云开发者平台）获得，如下图：

     二、开发者中心，上传、删除测试

    可以通过七牛云提供的开发者中心学习如何操作七牛云服务，代码测试

    地址：七牛开发者中心

    1.添加依赖

    shf-parent添加依赖管理

    1. <!--七牛云服务平台，第三方服务（图片上传）-->
    2. <dependency>
    3.     <groupId>com.qiniu</groupId>
    4.     <artifactId>qiniu-java-sdk</artifactId>
    5.     <version>7.2.0</version>
    6. </dependency>

    common-util引入依赖  

    1. <!--七牛云服务平台，第三方服务（图片上传）-->
    2. <dependency>
    3.     <groupId>com.qiniu</groupId>
    4.     <artifactId>qiniu-java-sdk</artifactId>
    5. </dependency>

    2.代码测试 

    1. package com.atguigu.test;
    2.  
    3. import com.google.gson.Gson;
    4. import com.qiniu.common.QiniuException;
    5. import com.qiniu.common.Zone;
    6. import com.qiniu.http.Response;
    7. import com.qiniu.storage.BucketManager;
    8. import com.qiniu.storage.Configuration;
    9. import com.qiniu.storage.UploadManager;
    10. import com.qiniu.storage.model.DefaultPutRet;
    11. import com.qiniu.util.Auth;
    12. import org.junit.Test;
    13.  
    14. public class TestQiniu {
    15.  
    16.     // 上传本地文件
    17.     @Test
    18.     public void uploadFile(){
    19.         //构造一个带指定Zone对象的配置类
    20.         Configuration cfg = new Configuration(Zone.zone2());
    21.         //...其他参数参考类注释
    22.         UploadManager uploadManager = new UploadManager(cfg);
    23.         //...生成上传凭证，然后准备上传
    24.         String accessKey = "***";
    25.         String secretKey = "***";
    26.         String bucket = "shf-img1";
    27.         //如果是Windows情况下，格式是 D:\\qiniu\\test.png，可支持中文
    28.         String localFilePath = "C:/Users/Plisetsky/Pictures/Saved Pictures/test.jpg";
    29.         //默认不指定key的情况下，以文件内容的hash值作为文件名
    30.         String key = "test.jpg";
    31.         Auth auth = Auth.create(accessKey, secretKey);
    32.         String upToken = auth.uploadToken(bucket);
    33.         try {
    34.             Response response = uploadManager.put(localFilePath, key, upToken);
    35.             //解析上传成功的结果
    36.             DefaultPutRet putRet = new Gson().fromJson(response.bodyString(), DefaultPutRet.class);
    37.             System.out.println(putRet.key);
    38.             System.out.println(putRet.hash);
    39.         } catch (QiniuException ex) {
    40.             Response r = ex.response;
    41.             System.err.println(r.toString());
    42.             try {
    43.                 System.err.println(r.bodyString());
    44.             } catch (QiniuException e) {
    45.                 e.printStackTrace();
    46.             }
    47.         }
    48.     }
    49.  
    50.     // 删除空间中的文件
    51.     @Test
    52.     public void deleteFile() {
    53.         //构造一个带指定Zone对象的配置类
    54.         Configuration cfg = new Configuration(Zone.zone2());
    55.         //...其他参数参考类注释
    56.         String accessKey = "***";
    57.         String secretKey = "***";
    58.         String bucket = "shf-img1";//空间
    59.         String key = "test.jpg";//文件名称
    60.         Auth auth = Auth.create(accessKey, secretKey);
    61.         BucketManager bucketManager = new BucketManager(auth, cfg);
    62.         try {
    63.             bucketManager.delete(bucket, key);
    64.         } catch (QiniuException ex) {
    65.             //如果遇到异常，说明删除失败
    66.             System.err.println(ex.code());
    67.             System.err.println(ex.response.toString());
    68.         }
    69.     }
    70. }

    3. 封装工具类

    1. package com.atguigu.util;
    2.  
    3. import com.google.gson.Gson;
    4. import com.qiniu.common.QiniuException;
    5. import com.qiniu.common.Zone;
    6. import com.qiniu.http.Response;
    7. import com.qiniu.storage.BucketManager;
    8. import com.qiniu.storage.Configuration;
    9. import com.qiniu.storage.UploadManager;
    10. import com.qiniu.storage.model.DefaultPutRet;
    11. import com.qiniu.util.Auth;
    12.  
    13. /**
    14.  * 七牛云工具类
    15.  */
    16. public class QiniuUtils {
    17.     //设置ak，sk
    18.     public  static String accessKey = "***";
    19.     public  static String secretKey = "***";
    20.     public  static String bucket = "shf-img1";
    21.  
    22.     public static void upload2Qiniu(String filePath,String fileName){
    23.         //构造一个带指定Zone对象的配置类
    24.         Configuration cfg = new Configuration(Zone.zone2());
    25.         UploadManager uploadManager = new UploadManager(cfg);
    26.         Auth auth = Auth.create(accessKey, secretKey);
    27.         String upToken = auth.uploadToken(bucket);
    28.         try {
    29.             Response response = uploadManager.put(filePath, fileName, upToken);
    30.             //解析上传成功的结果
    31.             DefaultPutRet putRet = new Gson().fromJson(response.bodyString(), DefaultPutRet.class);
    32.         } catch (QiniuException ex) {
    33.             Response r = ex.response;
    34.             try {
    35.                 System.err.println(r.bodyString());
    36.             } catch (QiniuException ex2) {
    37.                 //ignore
    38.             }
    39.         }
    40.     }
    41.  
    42.     //上传文件
    43.     public static void upload2Qiniu(byte[] bytes, String fileName){
    44.         //构造一个带指定Zone对象的配置类
    45.         Configuration cfg = new Configuration(Zone.zone2());
    46.         //...其他参数参考类注释
    47.         UploadManager uploadManager = new UploadManager(cfg);
    48.  
    49.         //默认不指定key的情况下，以文件内容的hash值作为文件名
    50.         String key = fileName;
    51.         Auth auth = Auth.create(accessKey, secretKey);
    52.         String upToken = auth.uploadToken(bucket);
    53.         try {
    54.             Response response = uploadManager.put(bytes, key, upToken);
    55.             //解析上传成功的结果
    56.             DefaultPutRet putRet = new Gson().fromJson(response.bodyString(), DefaultPutRet.class);
    57.             System.out.println(putRet.key);
    58.             System.out.println(putRet.hash);
    59.         } catch (QiniuException ex) {
    60.             Response r = ex.response;
    61.             System.err.println(r.toString());
    62.             try {
    63.                 System.err.println(r.bodyString());
    64.             } catch (QiniuException ex2) {
    65.                 //ignore
    66.             }
    67.         }
    68.     }
    69.  
    70.     //删除文件
    71.     public static void deleteFileFromQiniu(String fileName){
    72.         //构造一个带指定Zone对象的配置类
    73.         Configuration cfg = new Configuration(Zone.zone2());
    74.         String key = fileName;
    75.         Auth auth = Auth.create(accessKey, secretKey);
    76.         BucketManager bucketManager = new BucketManager(auth, cfg);
    77.         try {
    78.             bucketManager.delete(bucket, key);
    79.         } catch (QiniuException ex) {
    80.             //如果遇到异常，说明删除失败
    81.             System.err.println(ex.code());
    82.             System.err.println(ex.response.toString());
    83.         }
    84.     }
    85. }

    三、房源图片上传

    1. spring mvc 配置上传支持

    在spring-mvc添加配置 

    1. <!--配置上传解析器
    2. "maxUploadSize":表示文件大小，图片的大小
    3. "maxInMemorySize" ：图片加载到内存当中的大小 长 * 宽 * 像素字节数(argb8888,rgb565,argb4444)
    4.  "defaultEncoding":UTF-8
    5.  优秀程序员：CV战士
    6. -->
    7. <bean id="multipartResolver"
    8.       class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    9.     <!-- 设定文件上传的最大值为100MB，100*1024*1024 -->
    10.     <property name="maxUploadSize" value="104857600" />
    11.     <!-- 设定文件上传时写入内存的最大值，如果小于这个参数不会生成临时文件，默认为10240 -->
    12.     <property name="maxInMemorySize" value="4096" />
    13.     <!-- 设定默认编码 -->
    14.     <property name="defaultEncoding" value="UTF-8"/>
    15. </bean>

    2. house/show.html页面添加事件

    1.     $(function(){
    2.         //表示房源图片
    3.         $("#upload1").on("click",function(){
    4.             opt.openWin('/houseImage/uploadShow/[[${house.id}]]/1','上传房源图片',580,430);
    5.         });
    6.         //表示房产图片
    7.         $("#upload2").on("click",function(){
    8.             opt.openWin('/houseImage/uploadShow/[[${house.id}]]/2','上传房产图片',580,430);
    9.         });
    10.         //上传首页默认图片
    11.         $("#upload3").on("click",function(){
    12.             opt.openWin('/houseImage/uploadShow/[[${house.id}]]/3','上传首页默认图片',580,430);
    13.         });
    1. <div class="row">
    2.     <div class="col-sm-12">
    3.         <div class="ibox float-e-margins">
    4.             <div class="ibox-title">
    5.                 <h3>房源图片信息</h3>
    6.                 <a class="btn btn-xs btn-primary" id="upload1">上传房源图片</a>
    7.             </div>
    8.             <div class="ibox-content">
    9.                 <a th:each="item,it : ${houseImage1List}" class="fancybox" >
    10.                     <img alt="image" th:src="${item.imageUrl}"/>
    11.                     <a th:attr="data-id=${item.id}" class="deleteImages1">删除</a>
    12.                 </a>
    13.             </div>
    14.         </div>
    15.     </div>
    16. </div>
    17.  
    18. <div class="row">
    19.     <div class="col-sm-12">
    20.         <div class="ibox float-e-margins">
    21.             <div class="ibox-title">
    22.                 <h3>房产图片信息</h3>
    23.                 <a class="btn btn-xs btn-primary" id="upload2">上传房产图片</a>
    24.             </div>
    25.             <div class="ibox-content">
    26.                 <a th:each="item,it : ${houseImage2List}" class="fancybox" >
    27.                     <img alt="image" th:src="${item.imageUrl}"/>
    28.                     <a th:attr="data-id=${item.id}" class="deleteImages1">删除</a>
    29.                 </a>
    30.             </div>
    31.         </div>
    32.     </div>
    33. </div>
    34.  
    35. <div class="row">
    36.     <div class="col-sm-12">
    37.         <div class="ibox float-e-margins">
    38.             <div class="ibox-title">
    39.                 <h3>房源首页图片</h3>
    40.                 <a class="btn btn-xs btn-primary" id="upload3">上传首页默认图片</a>
    41.             </div>
    42.             <div class="ibox-content">
    43.                 <a th:each="item,it : ${houseImage3List}" class="fancybox" >
    44.                     <img alt="image" th:src="${item.imageUrl}"/>
    45.                     <a th:attr="data-id=${item.id}" class="deleteImages2">删除</a>
    46.                 </a>
    47.             </div>
    48.         </div>
    49.     </div>
    50. </div>

    3.添加服务器端代码

    1. package com.atguigu.controller;
    2.  
    3. import com.alibaba.dubbo.config.annotation.Reference;
    4. import com.atguigu.entity.HouseImage;
    5. import com.atguigu.result.Result;
    6. import com.atguigu.service.HouseImageService;
    7. import com.atguigu.util.QiniuUtils;
    8. import org.springframework.stereotype.Controller;
    9. import org.springframework.web.bind.annotation.PathVariable;
    10. import org.springframework.web.bind.annotation.RequestMapping;
    11. import org.springframework.web.bind.annotation.RequestParam;
    12. import org.springframework.web.bind.annotation.ResponseBody;
    13. import org.springframework.web.multipart.MultipartFile;
    14.  
    15. import java.util.Map;
    16. import java.util.UUID;
    17.  
    18. /**
    19.  * @Date 2022/6/22 14:12
    20.  * @Author by:Plisetsky
    21.  */
    22. @Controller
    23. @RequestMapping("/houseImage")
    24. public class HouseImageController {
    25.  
    26.     private static final String PAGE_UPLOAD_SHOW = "house/upload";
    27.     private static final String ACTION_LIST = "redirect:/house/detail/";
    28.  
    29.     @Reference
    30.     HouseImageService houseImageService;
    31.  
    32.  
    33.     //删除默认展示图片
    34.     @RequestMapping("/deleteDefault/{houseId}/{id}")
    35.     public String deleteDefault(@PathVariable("houseId")Long houseId,@PathVariable("id") Long id) {
    36.         HouseImage houseImage = houseImageService.getById(id);
    37.         String imageName = houseImage.getImageName();
    38.         houseImageService.delete(id);//删除前查询数据，否则删除后查不到了
    39.         //删除house默认图片
    40.         houseImageService.updateDefaultImage(houseId,null);
    41.  
    42.         //删除七牛云内图片
    43.         QiniuUtils.deleteFileFromQiniu(imageName);
    44.  
    45.         return ACTION_LIST + houseId;
    46.     }
    47.  
    48.     //删除房源、房产图片
    49.     @RequestMapping("/delete/{houseId}/{id}")
    50.     public String delete(@PathVariable("houseId")Long houseId,@PathVariable("id") Long id){
    51.  
    52.         HouseImage houseImage = houseImageService.getById(id);
    53.         String imageName = houseImage.getImageName();
    54.         houseImageService.delete(id);//删除前查询数据，否则删除后查不到了
    55.         //删除七牛云内图片
    56.         QiniuUtils.deleteFileFromQiniu(imageName);
    57.  
    58.         return ACTION_LIST + houseId;
    59.     }
    60.  
    61.     //上传房源、房产图片，可以不返回值
    62.     @RequestMapping("/upload/{houseId}/{type}")
    63.     @ResponseBody
    64.     public Result upload(@RequestParam("file") MultipartFile[] files, //file是固定的，底层会自动生成表单项.[]接收多个表单项
    65.                          @PathVariable("houseId") Long houseId,
    66.                          @PathVariable("type") Integer type) throws Exception { //接收上传文件，再上传到七牛云上
    67.  
    68.         if(files !=null && files.length>0){ //至少上传一个文件
    69.             for (MultipartFile file:files){
    70.                 byte[] bytes = file.getBytes();
    71.  
    72.                 //String name = file.getOriginalFilename();//原始文件名称
    73.                 //QiniuUtils.upload2Qiniu(bytes,name); 不能使用原始文件名称上传，会重名覆盖
    74.  
    75.                 String newFileName = UUID.randomUUID().toString();
    76.                 //将图片上传到七牛云
    77.                 QiniuUtils.upload2Qiniu(bytes,newFileName);
    78.                 String imageUrl = "http://rdv0p81lw.hn-bkt.clouddn.com/"+newFileName;
    79.  
    80.                 //如果上传的是首页默认图片，将地址更新到house表
    81.                 if(type==3){
    82.                     houseImageService.updateDefaultImage(houseId,imageUrl);
    83.                 }
    84.  
    85.                 //将图片路径信息等保存到数据库
    86.                 HouseImage houseImage = new HouseImage();
    87.                 houseImage.setHouseId(houseId);
    88.                 houseImage.setImageName(newFileName);
    89.                 houseImage.setImageUrl(imageUrl);
    90.                 houseImage.setType(type);
    91.                 houseImageService.insert(houseImage);
    92.             }
    93.  
    94.         }
    95.         return Result.ok();
    96.     }
    97.     //前往上传页面
    98.     @RequestMapping("/uploadShow/{houseId}/{type}")
    99.     public String uploadShow(@PathVariable("houseId") Long houseId,
    100.                              @PathVariable("type") Integer type, Map map){
    101.  
    102.         map.put("houseId",houseId);
    103.         map.put("type",type);
    104.         return PAGE_UPLOAD_SHOW;
    105.     }
    106. }

    4. 上传页面

    1. <!DOCTYPE html>
    2. <html xmlns:th="http://www.thymeleaf.org">
    3. <head th:include="common/head :: head"></head>
    4. <!--百度上传组件-->
    5. <link rel="stylesheet" type="text/css" th:href="@{/static/css/plugins/webuploader/webuploader.css}">
    6. <link rel="stylesheet" type="text/css" th:href="@{/static/css/demo/webuploader-demo.css}">
    7. <script th:src="@{/static/js/plugins/webuploader/webuploader.min.js}"></script>
    8. <script th:src="@{/static/js/demo/webuploader-demo.js}"></script>
    9.  
    10. <script type="text/javascript">
    11.     // 添加全局站点信息 swf文件路径
    12.     var BASE_URL = '/static/js/plugins/webuploader';
    13.     //  自定义请求地址,传入房子id和类型
    14.     var BASE_UPLOAD = '/houseImage/upload/[[${houseId}]]/[[${type}]]';
    15.     // 会自动生成表单
    16. </script>
    17. <body class="gray-bg">
    18. <div class="row">
    19.     <div class="col-sm-9">
    20.         <div class="wrapper wrapper-content animated fadeInUp">
    21.             <div class="ibox">
    22.                 <div class="ibox-content">
    23.                     <div class="row">
    24.                         <div class="ibox-content">
    25.                             <div class="page-container" id="uploadShow">
    26.                                 <p>您可以尝试文件拖拽，使用QQ截屏工具，然后激活窗口后粘贴，或者点击添加图片按钮，来体验此demo.</p>
    27.                                 <div id="uploader" class="wu-example">
    28.                                     <div class="queueList">
    29.                                         <div id="dndArea" class="placeholder">
    30.                                             <div id="filePicker"></div>
    31.                                             <p>或将照片拖到这里，单次最多可选300张</p>
    32.                                         </div>
    33.                                     </div>
    34.                                     <div class="statusBar" style="display:none;">
    35.                                         <div class="progress">
    36.                                             <span class="text">0%</span>
    37.                                             <span class="percentage"></span>
    38.                                         </div>
    39.                                         <div class="info"></div>
    40.                                         <div class="btns">
    41.                                             <div id="filePicker2"></div>
    42.                                             <div class="uploadBtn">开始上传</div>
    43.                                         </div>
    44.                                     </div>
    45.                                 </div>
    46.                             </div>
    47.                         </div>
    48.                     </div>
    49.                     <div class="row">
    50.                         <div class="col-sm-4 col-sm-offset-2">
    51.                             <button class="btn btn-primary" type="button" onclick="opt.closeWin(true);">确定</button>
    52.                         </div>
    53.                     </div>
    54.                 </div>
    55.             </div>
    56.         </div>
    57.     </div>
    58. </div>
    59. </body>
    60. </html>

    5. 上传测试

    四、用户头像上传

    1、用户列表页添加选项

    <a class="upload" th:attr="data-id=${item.id}">上传头像</a>
    1. $(".upload").on("click",function(){
    2.     var id = $(this).attr("data-id");
    3.     opt.openWin('/admin/uploadShow/'+id,'上传头像',580,300);
    4. });

    2、添加服务器端代码

    1.     //头像上传
    2.     @RequestMapping("/upload/{id}")
    3.     public String upload(@PathVariable("id") Long id,
    4.                          @PathVariable("file") MultipartFile file,HttpServletRequest request) throws IOException {
    5.         //1.上传到七牛云
    6.         byte[] bytes = file.getBytes();
    7.         String newFileName = UUID.randomUUID().toString();
    8.         QiniuUtils.upload2Qiniu(bytes,newFileName);
    9.  
    10.         //2.地址存储到数据库
    11.         String imageUrl = "你的七牛云空间的域名/"+newFileName;
    12.         Admin admin = new Admin();
    13.         admin.setId(id);
    14.         admin.setHeadUrl(imageUrl);
    15.         adminService.update(admin);
    16.  
    17.         return this.successPage(this.MESSAGE_SUCCESS, request);
    18.     }
    19.  
    20.  
    21.     //前往头像上传
    22.     @RequestMapping("/uploadShow/{id}")
    23.     public String uploadShow(@PathVariable("id") Long id,Map map){
    24.         map.put("id",id);
    25.  
    26.         return PAGE_UPLOAD;
    27.     }

    3、上传页面

    admin/upload.html

    1. <!DOCTYPE html>
    2. <html xmlns:th="http://www.thymeleaf.org">
    3. <head th:include="common/head :: head"></head>
    4. <body class="gray-bg">
    5. <div class="wrapper wrapper-content animated fadeInRight">
    6.     <div class="ibox float-e-margins">
    7.         <div class="ibox-content" style="width: 98%;">
    8.             <form id="ec" th:action="@{/admin/upload/{id}(id=${id})}" method="post" enctype="multipart/form-data" class="form-horizontal">
    9.                 <div class="form-group">
    10.                     <label class="col-sm-2 control-label">上传头像：</label>
    11.                     <div class="col-sm-10">
    12.                         <input type="file" name="file" id="file" class="form-control" readonly/>
    13.                     </div>
    14.                 </div>
    15.                 <div class="hr-line-dashed"></div>
    16.                 <div class="form-group">
    17.                     <div class="col-sm-4 col-sm-offset-2 text-right">
    18.                         <button class="btn btn-primary" type="submit">确定</button>
    19.                         <button class="btn btn-white" type="button" onclick="javascript:opt.closeWin();" value="取消">取消</button>
    20.                     </div>
    21.                 </div>
    22.             </form>
    23.         </div>
    24.     </div>
    25. </div>
    26. </body>
    27. </html>

  • 相关阅读:
    Leetcode刷题【hot100】最长连续序列
    【C++笔试强训】第二十七天
    Python万圣节蝙蝠
    python读取图像小工具
    【技术开发】酒精测试仪解决方案开发设计
    MySQL夺命66问，面试必看！（荣耀典藏版）
    软件测试逻辑覆盖相关理解
    【Python 零基础入门】常用内置函数 再探
    Mybatis-plus 使用
    腾讯云服务器mysql安装
  • 原文地址：https://blog.csdn.net/a111042555/article/details/125484823