返回多张图片给前端--base64

再下限于水平有限，多次尝试后端返回图片到前端，没有找到一种最好的方法。

1.可以用本地工程存放图片（与放服务器一样的）。每次返回图片在本地工程的路径就可以。
有点：简单易用，可以返回多张图片。
缺点：本地工程越来越臃肿，且不能解决夸工程问题，比如项目前台和cms是两个工程，图片不能统一互访。

2.用mongoDB存放，每次通过图片流返回前端。（这里的convertGridFSFile2Resource是针对springboot2.x以上版本，前面的博客有专门讲）

  @RequestMapping(value = "/downloadFile",method = RequestMethod.GET)
    public void downloadFile(@RequestParam(name = "_ids") String _ids, HttpServletResponse response) throws Exception {
        GridFSFile gridFSFile = null;
        GridFsResource fsResource = null;
             gridFSFile = gridFsTemplate.findOne(new Query().addCriteria(Criteria.where("_id").is(_ids)));
             fsResource = gridConfig.convertGridFSFile2Resource(gridFSFile);
        IOUtils.copy(fsResource.getInputStream(),response.getOutputStream());
    }
  // 将GridFSFile 转成 GridFsResource
    public GridFsResource convertGridFSFile2Resource(GridFSFile gridFsFile) {
        GridFSDownloadStream gridFSDownloadStream = gridFSBucket.openDownloadStream(gridFsFile.getObjectId());
        return new GridFsResource(gridFsFile, gridFSDownloadStream);
    }

有点：图片存储mongoDB方便简单易用。
缺点：这种方式一次只能返回一张图片。

3.使用fastdfs。这个在前面的博客有详细讲解，不再赘述。
有点：可以返回多张图片路径，图片存在fastdfs存储器上面。
缺点：在服务器配置fastdfs以及代理服务器nginx真的很麻烦，一不小心就出错，具体请参考前面博客。

4.（今天的重点）mongoDB配合base64一起使用。
步骤：
①、将图片用for循环从内存读出

②、将图片编码成Base64，并存储到数组ArrayList中

③、返回给前端编码好的图片，前端代码依次解析即可

 @RequestMapping(value = "/downloadFiles",method = RequestMethod.GET)
    @ResponseBody
    public List<String> downloadFiles(@RequestParam(name = "_ids") String _ids, HttpServletResponse response) throws Exception {
        //批量下载
        List<String> list = new ArrayList<>();
        String [] idArray = _ids.split(",");
        GridFSFile gridFSFile = null;
        GridFsResource fsResource = null;
        for(int j=0;j<idArray.length;j++){
            gridFSFile = gridFsTemplate.findOne(new Query().addCriteria(Criteria.where("_id").is(idArray[j])));
            fsResource = gridConfig.convertGridFSFile2Resource(gridFSFile);
            byte[] download = fsResource.getContentType().getBytes();
            String base64str = Base64.encodeBase64String(download);
            String img = "data:image/jpeg;base64,"+base64str;
            list.add(img);
        }
        return list;
    }

这样返回的是一个list集合，里面有多个base64字符串。返给前端。
前端获取办法：
<img src= “data:image/jpeg;base64,你的base64码” alt=""》
data:,文本数据（可以放下面的格式内容）
data:text/plain,文本数据
data:text/html,HTML代码
data:text/html;base64,base64编码的HTML代码
data:text/css,CSS代码
data:text/css;base64,base64编码的CSS代码
data:text/javascript,Javascript代码
data:text/javascript;base64,base64编码的Javascript代码
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据

这样做的好处是，节省了一个HTTP 请求。坏处是浏览器不会缓存这种图像