基于Base64编/解码算法的Spring Boot文件上传技术解析

文件上传时Web应用最为常见的功能之一，传统的文件上传须要定制一个特殊的form表单来上传文件，以上传图片为例，常规的作法是先上传图片，而后回传图片地址，最后在使用图片。这无疑会带来一个严重的问题：若是在接下来使用图片的过程当中web请求中断了或者其余缘由致使请求关闭，那么在服务器上就会遗留下未被使用的脏数据，还须要经过其余的方式进行清理。我将这种设计模式称之为“粗犷型经济”模式，无论市场（业务）是否消费，先生产（上传）了再说，最后会致使资源的极度浪费。而本次分享要谈的是另一种设计模式，我称之为“节约型经济”模式，将生产活动（上传）以“责任承包”制度承包（下方）给具体的业务，采用Base64解码算法的方式，经过二进制文本同步传输到业务方法，最后将文件解码存储，以达到节约资源的效果。javascript

基本术语

1. Base64编码

Base64编码是从二进制到字符的过程，可用于在HTTP环境下传递较长的标识信息。例如，在Java Persistence系统Hibernate中，就采用Base64来将一个较长的惟一标识符（通常为128-bit的UUID）编码成一个字符串，用做HTTP表单和HTTP GET URL中的参数。在其余的应用场景中，也经常须要把二进制数据编码为合适放在URL（包括隐藏表单域）中的形式。此时，采用Base64编码具备不可读性，须要解码后才能阅读。html

2. 文件上传

文件上传就是将信息从我的计算机（本地计算机）传送到中央服务器（远程计算机）系统上，让网络上的其余用户能够进行访问。文件上传又分为Web上传和FTP上传，前者直接经过点击网页上的链接便可操做，后者须要专门的FTP工具进行操做。前端

案例解析

以添加文章的需求为一个案例，一篇文章须要有ID，标题，封面，简介，正文等信息。针对文章封面的设置，一般的作法是在添加文章的页面中经过异步的方式先将图片上传至服务器，而后回传图片存储地址（URL或者URI）绑定到一个隐藏域中和一个用于预览的IMG节点上。此时，文章主体信息是没有提交到服务器的，但与文章相关的图片已经先于文章到达了服务器，这就比如你想要去洗手间放翔，结果翔尚未出来，先从嘴里呕吐了一些东东。虽然看起来都是一个“异化”过程，但总以为让人“恶心”。本来放完翔（提交请求）冲一下马桶（提交事务）就完事了，你如今还须要额外的擦拭一下地上的呕吐物（清理垃圾文件）。java

基于上述的一个应用背景，提出了采用Base64编/解码的方式同步上传文件，让文章的图片随文章主体信息一块儿到达服务端，若是在请求的过程当中服务意外终止，那么在服务器上也不会产生任何脏数据。需求和出发点就聊这么多，接下来进入本次分享的正题，看看如何实现同步上传文件的功能。web

功能实现

1. 解码器

咱们须要定义一个解码器对前端传入的二进制的图片数据进行解码，对于前端如何将图片文件采用Base64算法编码，在接下来的内容当中单独介绍。此时解码器的作用主要是获取Base64编码的二进制文本中header信息（编码方式）和文件类型信息。而后对数据域进行解码。完成解码工做后，再讲字节码转换成咱们熟悉的MultipartFile类型对象。解码器的实现代码以下：算法

package com.ramostear.jfast.common.utils;

import org.springframework.web.multipart.MultipartFile;

import java.io.*;

/** * @author ramostear|谭朝红 * @create-time 2019/3/19 0019-23:54 * @modify by : * @since: */
public class Base64Decoder implements MultipartFile{

    private final byte[] IMAGE;

    private final String HEADER;

    private Base64Decoder(byte[]image,String header){
        this.IMAGE = image;
        this.HEADER = header;
    }

    public static MultipartFile multipartFile(byte[]image,String header){
        return new Base64Decoder(image,header);
    }

    @Override
    public String getName() {
        return System.currentTimeMillis()+Math.random()+"."+HEADER.split("/")[1];
    }

    @Override
    public String getOriginalFilename() {
        return System.currentTimeMillis()+(int)Math.random()*10000+"."+HEADER.split("/")[1];
    }

    @Override
    public String getContentType() {
        return HEADER.split(":")[1];
    }

    @Override
    public boolean isEmpty() {
        return IMAGE == null || IMAGE.length == 0;
    }

    @Override
    public long getSize() {
        return IMAGE.length;
    }

    @Override
    public byte[] getBytes() throws IOException {
        return IMAGE;
    }

    @Override
    public InputStream getInputStream() throws IOException {
        return new ByteArrayInputStream(IMAGE);
    }

    @Override
    public void transferTo(File file) throws IOException, IllegalStateException {
        new FileOutputStream(file).write(IMAGE);
    }
}
复制代码

2. 转换器

如今，须要定义一个转换器，将前端传入的图片字符信息转换成Base64编码的字节数组，而后调用解码器得到最终的MultipartFile类型对象。转换器的实现比较简单，器代码以下：spring

package com.ramostear.jfast.common.utils;

import org.springframework.web.multipart.MultipartFile;

import java.util.Base64;

/** * @author ramostear|谭朝红 * @create-time 2019/3/20 0020-0:00 * @modify by : * @since: */
public class Base64Converter {

    public static MultipartFile converter(String source){
        String [] charArray = source.split(",");
        Base64.Decoder decoder = Base64.getDecoder();
        byte[] bytes = new byte[0];
        bytes = decoder.decode(charArray[1]);
        for (int i=0;i<bytes.length;i++){
            if(bytes[i]<0){
                bytes[i]+=256;
            }
        }
        return Base64Decoder.multipartFile(bytes,charArray[0]);
    }
}
复制代码

重点介绍一下转换器的方法：数据库

首先咱们先看看基于Base64算法编码后的图片二进制字符的格式：apache
data:image/png;base64,iVBOR....Px1yGQ9EOFXNAAAAAE1FTkSuQmcc
复制代码
所以，先经过“，”分割字符串，拿到数据的头部信息***data:image/png;base64*** ,再将数据的主体部分经过Base64进行转码，得到一个byte数组，最后调用解码器的解码方法获取MultipartFile对象。canvas

3. 前端的Base64编码

后端的核心逻辑已经完成，接下来将介绍前端如何将一张图片采用Base64算法进行编码。

首先，须要有一个添加文章的form表单，同时将图片域设置为隐藏状态，提供一个图片预览的dom节点和一个浏览本地图片的input输入框，表单的核心代码以下：

...
 <form action="/articles" method="POST">
     ...
     <div class="file-preview">
          <div class="file-upload-zone">
                <div class="file-upload-zone-title">Upload & preview img here …</div>
          </div>
     </div>
     <div class="clearfix"></div>
     <input type="hidden" name="cover" id="cover"/>
     <div class="input-group-btn">
         <button class="btn btn-blue" type="button" id="upload-btn">
             <i class="fa fa-folder-open"></i>
             <input id="upload-cover" name="upload-cover" multiple="multiple" onchange="fileChange(this)" type="file" accept="image/*"/>
         </button>
     </div>
     ...
</form>
...
复制代码

而后是定义一个fileChange方法来处理文件编码的工做，代码以下：

function fileChange(obj){
        try{
            var file = obj.files[0];
            var reader = new FileReader();
            var fileName="";
            if(typeof(fileName) != "undefined"){
                fileName = $(obj).val().split("\\").pop();
            }
            reader.onload = function(){
                var img = new Image();
                img.src = reader.result;
                img.onload = function(){
                    var w = img.width,h = img.height;
                    var canvas = document.createElement("canvas");
                    var ctx = canvas.getContext("2d");
                    $(canvas).attr({
                        width:w,
                        height:h
                    });
                    ctx.drawImage(img,0,0,w,h);
                    var base64 = canvas.toDataURL("image/png",0.5);
                    var result = {
                        url:window.URL.createObjectURL(file),
                        base64:base64,
                        clearBase64:base64.substr(base64.indexOf(',')+1),
                      suffix:base64.substring(base64.indexOf(',')+1,base64.indexOf(';'))
                    };
                    $(".file-upload-zone-title").hide();
                    $(".file-upload-zone").empty();
                    $("#cover").val(result.base64);
                    $("<img src=\""+result.base64+"\" class=\"img img-responsive center-block\">").appendTo(".file-upload-zone");
                    $(".file-upload-zone").trigger("create");
                    $(".file-name").val(fileName);
                }
            }
            reader.readAsDataURL(obj.files[0]);
        }catch(e){
            layer.msg("error");
        }
    };
复制代码

关于这段代码的核心逻辑，其实与后端的解码过程恰好相反，这里再也不赘述。

到如今，经过Base64编码方式同步上传文件的核心功能已经完成，在接下来的内容中，使用Spring Boot 2.0快速的演示本次分享的内容。

添加文章服务组件#文件上传

1. 添加文章的服务组件

接一开始的需求背景，图片信息属于文章对象的一个属性值，因此处理文件上传的逻辑后置到service中，在本次测试代码中，最终的文件存储采用的是七牛云的CDN服务，关于CDN部分的代码不进行展开，能够上传到本地，二者操做的对象都是MultipartFile，关于如何存储不是本次分享的重点。文章服务组件主要代码以下：

package com.ramostear.jfast.domain.service.impl;

import com.ramostear.jfast.common.ext.Translate;
import com.ramostear.jfast.domain.repo.ArticleRepo;
import com.ramostear.jfast.domain.service.ArticleService;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
/** * @author ramostear|谭朝红 * @create-time 2019/3/19 0019-23:37 * @modify by : * @since: */
@Service(value = "articleService")
@Transactional(readOnly = true)
public class ArticleServiceImpl implements ArticleService {
    @Autowired
    private ArticleRepo articleRepo;
    
    @Override
    @Transactional
    public void save(ArticleVo vo) {
        Article article = Translate.toArticle(vo);
        articleRepo.save(article);
    }
    
复制代码

在ArticleService服务组件中，涉及到一个Translate类，它的做用主要是讲前端传输过来的ValueObject映射到POJO类中，同时将文件存储的逻辑也封装进去了，主要代码以下：

package com.ramostear.jfast.common.ext;

import com.ramostear.jfast.common.factory.CdnFactory;
import com.ramostear.jfast.common.factory.cdn.CdnRepository;
import com.ramostear.jfast.common.utils.Base64Converter;
import com.ramostear.jfast.domain.model.Article;
import com.ramostear.jfast.domain.vo.ArticleVo;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.BeanUtils;
import org.springframework.web.multipart.MultipartFile;

import java.util.Date;

/** * @author ramostear|谭朝红 * @create-time 2019/3/18 0018-3:39 * @modify by : * @since: */
public class Translate {

    private static CdnRepository cdnRepo = CdnFactory.builder(CdnFactory.CdnType.Qiniu);
    
    public static Article toArticle(ArticleVo vo){
        Article article = new Article();
        BeanUtils.copyProperties(vo,article);
        if(StringUtils.isNotBlank(vo.getCover())){
            MultipartFile file = Base64Converter.converter(vo.getCover());
            article.setCover(cdnRepo.save(file));
        }
        return article;
    }
}

复制代码

此处因为使用的是七牛云的CDN服务，因此经过一个CND的工厂类获取一个CND仓储实例，用于将文件写入到仓储中，并回传一个文件访问地址。除了上述的方法，还能够调用file.transferTo()方法将文件写入到本地（应用服务器）磁盘中。

这里的CND工厂类实现细节因为篇幅缘由再也不展开。须要了解更多关于CDN SDK使用方法，能够在文章末尾给我留言。

2. 文章控制器

最后，定义一个控制器，提供给前端添加文章时进行调用，文章控制器主要工做是得到前端传入的文章信息，而后调用文章服务组件，完成添加文章工做。核心代码以下：

package com.ramostear.jfast.domain.controller;

@RestController
public class ArticleController{
    @Autowired
    ArticleService articleService;
    
    @Postmapping(value="/articles")
    public ResponseEntity<Object> createArticle(@RequestBody ArticleVo vo){
        try{
            articleService.save(vo);
            return new ResponseEntity<>("已经成功将文字写入数据库",HttpStatus.CREATED);
        }catch(Exception e){
            return new ResponseEntity<>(e.getMessage(),HttpStatus.INTERNAL_SERVER_ERROR);
        }
    }
    
}
复制代码

结束语

本次分享只给出了核心部位的实现，其中涉及到的如CDN、HTML、JS等的知识没有展开，若是给你带来了困惑，能够在评论区给我留言，咱们再一块儿讨论。再次感谢你们赏光拜读，谢谢~~~

转载请保留版权信息，勿作商业用途

做者：谭朝红，原文标题：基于Base64编/解码算法的Spring Boot文件上传技术解析