个人技术总结

个人技术总结

——使用JSON传输图片

这个作业属于哪个课程	2021春软件工程实践|S班
这个作业要求在哪里	软件工程实践总结&个人技术博客
这个作业的目标	分析描述并总结擅长的相关技术
其他参考文献	见文末

目录

• 个人技术总结
  • 1技术概述
  • 2技术详述
    • 2.1主要思想
    • 2.2后端实现过程
  • 3技术使用中遇到的问题和解决过程
  • 4总结
  • 5参考文献与参考博客
  • 6主题提炼 ——一个简单的例子

1技术概述

一种后端使用JSON接收前端上传图片的技术，适用于前端使用JSON提交文件的情况，且该方法相较于其他传输方法有适用平台广、更符合RESTful思想的特点，难点在于对图片信息进行Base64格式的编解码。

2技术详述

2.1主要思想

本文介绍的图片上传方式，与Base64编解码密接相关，主要思路如下：

1.前端将图片转换为Base64格式字符串（因为在团队开发中前端使用微信小程序技术，直接将文件转换Base64的图片上传组件能很容易找到），并提取必要的图片信息；

2.将该字符串和图片信息根据接口文档填充到JSON中，并发送给后端；

3.后端接收前端JSON，解析JSON内容，将图片Base64字符串转换为字节数组；

4.根据前端提供的图片信息将字节数组保存为相应格式文件。

2.2后端实现过程

接下来主要讲解后端对图片的处理过程

1.在Controller层中，从JSON数据中获取图片的Base64字符串

  @PostMapping("/imgupload")
  public Result saveImage(@RequestBody ImageRequest imageRequest) {
      
      /*可在此鉴权，并进行其他初始化工作*/
      
      String base64Source = imageRequest.getBase64Str();
      Pair<ExceptionInfo,String> info = imageService.saveImage(base64Source);//交由Service层处理
      
      /*......*/
      
  }

2.在Service层中，为图片生成文件名

一个前端传来的Base64字符串的例子：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABTMAAAOtCAYAAABdcvHGAAASFnRFWHRteGZpbGUAJTNDbXhmaWxlJTIwaG9zdCUzRCUyMnd3dy5mcmVlZG

首先判断文件后缀名。根据字符串前端包含的Mime类型信息，判断文件格式，对应相应的扩展名（如上例中的image/png对应的就是.png扩展名）。

/*为方便从字符串中提取信息，这里的prefix包含第一个,前的所有内容。
  Map<String,String> mimeTypeMap中包含类似("data:image/png;base64",".png"),("data:image/jpeg;base64",".jpeg"),("data:image/gif;base64",".gif")这样的(key,value)键值对
/**
  * 根据Base64字符串前缀生成文件后缀名
  *
  * @param prefix Base64字符串前缀，类似data:image/png;base64
  * @return 文件后缀名
  */
public static String generateFileSuffixByBase64Prefix(String prefix) {
    String suffix = "";
    if (prefix != null) {
        if(mimeTypeMap.containsKey(prefix)){
            suffix = mimeTypeMap.get(prefix);
        }
    }
    return suffix;
}

之后，为图片生成文件名前缀，这里使用UUID减少名字重复的可能。

String uuid = UUID.randomUUID().toString().replace("-","");//去除原本UUID中的横杠“-”

最后，将前缀和后缀拼接形成文件名。

String backendFileName = uuid + suffix;

3.解码Base64并保存。使用Java8及以上的Base64标准类库java.util.Base64中的解码器将Base64字符串转换为字节数组。再保存到文件中。

Decoder decoder = Base64.getDecoder();//获取解码器
try (OutputStream outputStream = new FileOutputStream(Paths.get(folderName,backendFileName).toString())) {
    byte[] bytes = decoder.decode(source);//使用解码器解码Base64字符串为字节数组
    for (int i = 0;i < bytes.length;i++) {//矫正偏移
        if (bytes[i] < 0) {
            bytes[i] += 256;
        }
    }
    outputStream.write(bytes);//写入文件
}catch (FileNotFoundException e) {
    
    /*处理异常*/
    
    e.printStackTrace();
}catch (IOException e) {
    
    /*处理异常*/
    
    e.printStackTrace();
}

4.经过以上步骤，前端图片就上传到后端并保存到服务器中了。服务器经过进一步设置，前端就可访问图片资源。

3技术使用中遇到的问题和解决过程

问题：先前使用的sun.misc.BASE64Decoder提供的解码器会在Eclipse或者VSCode中报告错误

Access restriction: The type 'BASE64Decoder' is not API

并且经过进一步了解，使用这种解码器的效率不高

解决过程：通过网上搜索资料，一开始查找的是如何解决报错问题，但是找到解决方法后，考虑到其他队友的配置问题遂放弃这条思路，转变为查找更多Java中用于Base64解码的API，在网上的一篇文章中找到了Java8及以上版本可以使用java.util.Base64包对Base64进行编解码，并且效率是sun.misc的11倍以上，并且无需多余的配置，直接引包即可使用，不会报错，问题圆满解决。

import java.util.Base64;
import java.util.Base64.Decoder;//解码器
import java.util.Base64.Encoder;//编码器

4总结

使用JSON传输图片有好处也有坏处。

好处是相对于其他文件传输方式更易于理解，和处理其它接口一样，都是使用JSON与后端交互，后端可以有一个统一的处理方法，处理方法也更加灵活，可以加入鉴权等功能，而且可以隐藏用户文件的隐私细节，只需要图片的格式信息即可；此外，JSON格式的请求处理并没有限制后端使用的技术，后端使用其他框架，其他语言，前端无需作出修改也能够比较好的实现后端文件的接收，更加符合REST风格，并且也降低了对前端的要求，前端一般都可以都可以实现图片到Base64的转换。

坏处是增加了编码和解码的两个环节，增加了处理时间，降低了效率；更糟糕的是使用Base64表示文件数据会使数据量增大，增加了33.3%的字节数，我想这可能就是这种方法没有其他文件传输方法常用的原因。

5参考文献与参考博客

1.base64 - 廖雪峰的官方网站 (liaoxuefeng.com)

2.Base64编码为什么会使数据量变大？ - 尘恍若梦 - 博客园 (cnblogs.com)

3.eclipse报Access restriction: The type 'BASE64Decoder' is not API处理方法_蝈蝈的博客-CSDN博客

4.Java实现Base64加解密的方式_小菜鸟入门-CSDN博客

6主题提炼 ——一个简单的例子

前端发送json的一个例子

{
"base64Str":"data:image/jpg;base64,/9j/4RXrRXhpZgAATU0AKgAAAAgADQEAAAMAAAABAuoAAAEBAAMAAAABAuoAAAECAAMAAAADAAAAqgEGAAMAAAABAAIAAAESAAMAAAABAAEAAAEVAAMAAAABAA"/*省略了之后的部分*/
}

1.后端Controller处理代码

@PostMapping("/imgupload")
  public Result savePostImage(@RequestBody Map<String,Object> requestMap
      , HttpServletRequest request) {
      String base64Source = (String)requestMap.get("base64Str");//分离Base64字符串
      Result result;
      if (base64Source != null && fileName != null) {
          Pair<ExceptionInfo,String> info = imageService.saveImage(base64Source);//交由Service层处理
          if (info.getKey().equals(ExceptionInfo.OK)) {
              result = Result.success(info.getValue());
          } else {
              result = Result.error(info.getKey().getCode(), info.getKey().getMessage());
          }
      }else {
          result = Result.error(ExceptionInfo.POST_IMAGE_CONTENT_EMPTY.getCode()
                  ,ExceptionInfo.POST_IMAGE_CONTENT_EMPTY.getMessage());
      }
      return result;
  }

2.Service层处理方法saveImage

public Pair<ExceptionInfo,String> saveImage(String source, String fileName) {
    Pair<ExceptionInfo,String> info = new Pair<>(ExceptionInfo.POST_IMAGE_STORE_FAIL,"");
    
    //分离字符串中前部的信息串data:image/jpg;base64和以/9j/4RXrRXhp开始的可以解码的Base64字符串
    String[] sourceOrigin = source.split(",");
    
    if (sourceOrigin.length == 2) {
        
      //使用工具类Base64Util根据信息头生成文件名后缀
      String suffix = Base64Util.generateFileSuffixByBase64Prefix(sourceOrigin[0]);
        
      if (!StringUtils.isBlank(suffix)) {
        String uuid = UUID.randomUUID().toString().replace("-","");//使用UUID生成文件名
        String backendFileName = uuid + suffix;
          
        //使用工具类Base64Util解码并保存图片文件
        int result = Base64Util.decryptByBase64AndSave(sourceOrigin[1],backendFileName);
          
        if (result == 0) {
          info = new Pair<>(ExceptionInfo.OK,backendFileName);
        }else if (result == 1 ) {
          info = new Pair<>(ExceptionInfo.POST_IMAGE_FOLDER_NOT_CREATED,"");
        }else if (result == 2) {
          info = new Pair<>(ExceptionInfo.POST_IMAGE_CONTENT_EMPTY,"");
        }else if (result == 3) {
          info = new Pair<>(ExceptionInfo.POST_IMAGE_STORE_PATH_NOT_FOUND,"");
        }
      }
    }
    return info;
  }

3.工具类Base64Util的实现

/**
 * Base64图片解码工具类
 *
 * <p>
 * 用于解析前端发送的Base64图片数据，并保存到程序根目录Base64Decoded/文件夹下
 * </p>
 *
 * @author Tars
 * @since 2021-5-2
 */
public class Base64Util {

    private static boolean isFolderExist;
    private static String folderName="static";//存放在根目录该文件夹下
    private static Map<String,String> mimeTypeMap;

    //初始化信息头与文件名后缀的映射
    static {
        Map<String,String> typeMap = new HashMap<>();
        typeMap.put("data:image/png;base64",".png");//png格式图片
        typeMap.put("data:image/jpeg;base64",".jpeg");//jpeg格式图片
        typeMap.put("data:image/gif;base64",".gif");//gif格式图片
        typeMap.put("data:image/bmp;base64",".bmp");//bmp格式图片
        typeMap.put("data:image/x-icon;base64",".ico");//ico格式图片
        setMimeTypeMap(typeMap);
        
        folderName = Paths.get(System.getProperty("user.dir"),folderName).toString();
        File file = new File(folderName);
        
        //存放创建图片的文件夹，存放在根目录static文件夹下
        if (!file.exists()) {
            isFolderExist = file.mkdir();
            if (isFolderExist) {
                System.out.println("文件夹创建成功");
            }else {
                System.out.println("文件夹创建失败");
            }
        }else {
            isFolderExist = true;
        }
    }

    
    public static String getFolderName(){
        return Base64Util.folderName;
    }
    
    /**
     * 解码Base64字符串，并以指定文件名存储到Base64图片存储位置
     *
     * @param source   要解码的Base64字符串
     * @param saveName 存储文件名
     * @return the int 结果代码：0：成功，1：文件夹未创建，：2：Base64字符串或存储文件名为空
     *                      ，3：未找到存储位置，4：文件写入失败
     */
    public static int decryptByBase64AndSave(String source,String saveName) {
        int result = 0;
        if (!isFolderExist) {
         result = 1;
        }else if (StringUtils.isBlank(source) || StringUtils.isBlank(saveName)) {
            result = 2;
        }else {
            Decoder decoder = Base64.getDecoder();//获取解码器
            try (OutputStream outputStream = new FileOutputStream(Paths.get(folderName,saveName).toString())) {
                byte[] bytes = decoder.decode(source);//使用解码器解码Base64字符串为字节数组
                for (int i = 0;i < bytes.length;i++) {//矫正偏移
                    if (bytes[i] < 0) {
                        bytes[i] += 256;
                    }
                }
                outputStream.write(bytes);//写入文件
            }catch (FileNotFoundException e) {
                result = 3;
                e.printStackTrace();
            }catch (IOException e) {
                result = 4;
                e.printStackTrace();
            }
        }
        return result;
    }

    /**
     * 根据Base64字符串前缀生成文件后缀名
     *
     * @param prefix Base64字符串前缀，类似data:image/png;base64
     * @return 文件后缀名
     */
    public static String generateFileSuffixByBase64Prefix(String prefix) {
        String suffix = "";
        if (prefix != null) {
            if(mimeTypeMap.containsKey(prefix)){
                suffix = mimeTypeMap.get(prefix);
            }
            for (Map.Entry<String,String> mimePair : mimeTypeMap.entrySet()) {
                if (prefix.equals(mimePair.getKey())) {
                    suffix = mimePair.getValue();
                    break;
                }
            }
        }
        return suffix;
    }

    public static void setMimeTypeMap(Map<String, String> mimeTypeMap) {
        Base64Util.mimeTypeMap = mimeTypeMap;
    }
}