ssm项目笔记（五）图片存储方案

阳光穿透心脏的1/2处 2022-01-12 13:27 335阅读 0赞

## 1.图片存储方案 ##

### 介绍 ###

> 在实际开发中，我们会有很多处理不同功能的服务器。例如：
> 
> 应用服务器：负责部署我们的应用
> 
> 数据库服务器：运行我们的数据库
> 
> 文件服务器：负责存储用户上传文件的服务器

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70][]

> 分服务器处理的目的是让服务器各司其职，从而提高我们项目的运行效率。
> 
> 常见的图片存储方案：
> 
> 方案一：使用nginx搭建图片服务器
> 
> 方案二：使用开源的分布式文件存储系统，例如Fastdfs、HDFS等
> 
> 方案三：使用云存储，例如阿里云、七牛云等

### 1.1七牛云存储 ###

> 存储空间创建后，会在左侧的存储空间列表菜单中展示创建的存储空间名称，点击存储空间名称可以查看当前存储空间的相关信息

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 1][]

> 七牛云提供了多种方式操作对象存储服务，本项目采用Java SDK方式，地址：[https://developer.qiniu.com/kodo/sdk/1239/java][https_developer.qiniu.com_kodo_sdk_1239_java]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 2][]

### 1.2使用Java SDK操作七牛云需要导入如下maven坐标： ###

> <dependency>  
>   <groupId>com.qiniu</groupId>  
>   <artifactId>qiniu-java-sdk</artifactId>  
>   <version>7.2.0</version>  
> </dependency>

### 1.3鉴权 ###

> Java SDK的所有的功能，都需要合法的授权。授权凭证的签算需要七牛账号下的一对有效的Access Key和Secret Key，这对密钥可以在七牛云管理控制台的个人中心（[https://portal.qiniu.com/user/key][https_portal.qiniu.com_user_key]）获得，如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 3][]

### 1.4Java SDK操作七牛云 ###

> Java SDK完成图片上传和删除
> 
> 官方文档

//构造一个带指定Zone对象的配置类
    Configuration cfg = new Configuration(Zone.zone0());
    //...其他参数参考类注释
    
    UploadManager uploadManager = new UploadManager(cfg);
    //...生成上传凭证，然后准备上传
    String accessKey = "your access key";
    String secretKey = "your secret key";
    String bucket = "your bucket name";
    
    //默认不指定key的情况下，以文件内容的hash值作为文件名
    String key = null;
    
    try {
        byte[] uploadBytes = "hello qiniu cloud".getBytes("utf-8");
        ByteArrayInputStream byteInputStream=new ByteArrayInputStream(uploadBytes);
        Auth auth = Auth.create(accessKey, secretKey);
        String upToken = auth.uploadToken(bucket);
    
        try {
            Response response = uploadManager.put(byteInputStream,key,upToken,null, null);
            //解析上传成功的结果
            DefaultPutRet putRet = new Gson().fromJson(response.bodyString(), DefaultPutRet.class);
            System.out.println(putRet.key);
            System.out.println(putRet.hash);
        } catch (QiniuException ex) {
            Response r = ex.response;
            System.err.println(r.toString());
            try {
                System.err.println(r.bodyString());
            } catch (QiniuException ex2) {
                //ignore
            }
        }
    } catch (UnsupportedEncodingException ex) {
        //ignore
    }

//构造一个带指定Zone对象的配置类
    Configuration cfg = new Configuration(Zone.zone0());
    //...其他参数参考类注释
    
    String accessKey = "your access key";
    String secretKey = "your secret key";
    
    String bucket = "your bucket name";
    String key = "your file key";
    
    Auth auth = Auth.create(accessKey, secretKey);
    BucketManager bucketManager = new BucketManager(auth, cfg);
    try {
        bucketManager.delete(bucket, key);
    } catch (QiniuException ex) {
        //如果遇到异常，说明删除失败
        System.err.println(ex.code());
        System.err.println(ex.response.toString());
    }

### 1.5封装工具类 ###

package com.itheima.utils;
    
    import com.google.gson.Gson;
    import com.qiniu.common.QiniuException;
    import com.qiniu.common.Zone;
    import com.qiniu.http.Response;
    import com.qiniu.storage.BucketManager;
    import com.qiniu.storage.Configuration;
    import com.qiniu.storage.UploadManager;
    import com.qiniu.storage.model.DefaultPutRet;
    import com.qiniu.util.Auth;
    import java.io.File;
    import java.io.FileInputStream;
    import java.io.InputStream;
    
    /**
     * 七牛云工具类
     */
    public class QiniuUtils {
        public  static String accessKey = "dulF9Wze9bxujtuRvu3yyYb9JX1Sp23jzd3tO708";
        public  static String secretKey = "vZkhW7iot3uWwcWz9vXfbaP4JepdWADFDHVLMZOe";
        public  static String bucket = "qiniutest";
    
        public static void upload2Qiniu(String filePath,String fileName){
            //构造一个带指定Zone对象的配置类
            Configuration cfg = new Configuration(Zone.zone0());
            UploadManager uploadManager = new UploadManager(cfg);
            Auth auth = Auth.create(accessKey, secretKey);
            String upToken = auth.uploadToken(bucket);
            try {
                Response response = uploadManager.put(filePath, fileName, upToken);
                //解析上传成功的结果
                DefaultPutRet putRet = 
                  new Gson().fromJson(response.bodyString(), DefaultPutRet.class);
            } catch (QiniuException ex) {
                Response r = ex.response;
                try {
                    System.err.println(r.bodyString());
                } catch (QiniuException ex2) {
                    //ignore
                }
            }
        }
    
        //上传文件
        public static void upload2Qiniu(byte[] bytes, String fileName){
            //构造一个带指定Zone对象的配置类
            Configuration cfg = new Configuration(Zone.zone0());
            //...其他参数参考类注释
            UploadManager uploadManager = new UploadManager(cfg);
            //默认不指定key的情况下，以文件内容的hash值作为文件名
            String key = fileName;
            Auth auth = Auth.create(accessKey, secretKey);
            String upToken = auth.uploadToken(bucket);
            try {
                Response response = uploadManager.put(bytes, key, upToken);
                //解析上传成功的结果
                DefaultPutRet putRet = 
                  new Gson().fromJson(response.bodyString(), DefaultPutRet.class);
                System.out.println(putRet.key);
                System.out.println(putRet.hash);
            } catch (QiniuException ex) {
                Response r = ex.response;
                System.err.println(r.toString());
                try {
                    System.err.println(r.bodyString());
                } catch (QiniuException ex2) {
                    //ignore
                }
            }
        }
    
        //删除文件
        public static void deleteFileFromQiniu(String fileName){
            //构造一个带指定Zone对象的配置类
            Configuration cfg = new Configuration(Zone.zone0());
            String key = fileName;
            Auth auth = Auth.create(accessKey, secretKey);
            BucketManager bucketManager = new BucketManager(auth, cfg);
            try {
                bucketManager.delete(bucket, key);
            } catch (QiniuException ex) {
                //如果遇到异常，说明删除失败
                System.err.println(ex.code());
                System.err.println(ex.response.toString());
            }
        }
    }

## 图片增加 ##

### 新增套餐 ###

> 套餐其实就是检查组的集合，例如有一个套餐为“入职体检套餐”，这个检查组可以包括多个检查组：一般检查、血常规、尿常规、肝功三项等。所以在添加套餐时需要选择这个套餐包括的检查组。
> 
> 套餐对应的实体类为Setmeal，对应的数据表为t\_setmeal。套餐和检查组为多对多关系，所以需要中间表t\_setmeal\_checkgroup进行关联。

### 前端页面 ###

### 1.1完善页面 ###

> 套餐管理页面对应的是setmeal.html页面，根据产品设计的原型已经完成了页面基本结构的编写，现在需要完善页面动态效果。

### 1.2弹出新增窗口 ###

> 页面中已经提供了新增窗口，只是出于隐藏状态。只需要将控制展示状态的属性dialogFormVisible改为true接口显示出新增窗口。点击新建按钮时绑定的方法为handleCreate，所以在handleCreate方法中修改dialogFormVisible属性的值为true即可。同时为了增加用户体验度，需要每次点击新建按钮时清空表单输入项。
> 
> 由于新增套餐时还需要选择此套餐包含的检查组，所以新增套餐窗口分为两部分信息：基本信息和检查组信息，如下图：

### 新建按钮绑定单击事件，对应的处理函数为handleCreate ###

![20190621195325500.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 4][]

### 1.3动态展示检查组列表 ###

> 现在虽然已经完成了新增窗口的弹出，但是在检查组信息标签页中需要动态展示所有的检查组信息列表数据，并且可以进行勾选。具体操作步骤如下：

定义数据模型

> tableData:\[\],//添加表单窗口中检查组列表数据  
> checkgroupIds:\[\],//添加表单窗口中检查组复选框对应id

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 5][]

### 1.4完善handleCreate方法，发送ajax请求查询所有检查组数据并将结果赋值给tableData模型数据用于页面表格展示 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 6][]

## 后端代码 ##

### 1.5分别在CheckGroupController、 ###

### CheckGroupService、 ###

### CheckGroupServiceImpl、 ###

### CheckGroupDao、 ###

### CheckGroupDao.xml中扩展方法查询所有检查组数据 ###

# 图片上传并预览 #

> 此处使用的是ElementUI提供的上传组件el-upload，提供了多种不同的上传效果，上传成功后可以进行预览。

## 实现步骤： ##

### 1.1imageUrl:null,//模型数据，用于上传图片完成后图片预览 ###

![20190621195945337.png][]

### 1.2定义上传组件： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 7][]

### 1.3定义对应的钩子函数： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 8][]

1.4

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70]: /images/20220109/3e6a507901234fc6b8420583e0273f5a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 1]: /images/20220109/4f18bf09fcea4670af57d406ad153c5e.png
[https_developer.qiniu.com_kodo_sdk_1239_java]: https://developer.qiniu.com/kodo/sdk/1239/java
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 2]: /images/20220109/f7615d4abc3b4353992872e9fe067287.png
[https_portal.qiniu.com_user_key]: https://portal.qiniu.com/user/key
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 3]: /images/20220109/37a8cabb1e7546fa809e7253ae9e88d8.png
[20190621195325500.png]: /images/20220109/2f7c261b863b4b26b35628d6492ffe6b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 4]: /images/20220109/9ff449de0f694cd6a6b915ab21404d20.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 5]: /images/20220109/dce64543ad5440ad93830f1a23bc8567.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 6]: /images/20220109/7a71ad344ca2450985dc532d25eb4897.png
[20190621195945337.png]: /images/20220109/3bc1a9cba58943ef887272ac8d70b555.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 7]: /images/20220109/0ac4f50e02924a9a83d0fe9a2148a2f8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTc2NzYx_size_16_color_FFFFFF_t_70 8]: /images/20220109/b8c2c0d91f224945920845dc685ae4fb.png