base64+Zmage实现服务端返回多张图片并前端展示

base64+Zmage实现服务端返回多张图片并前端展示

实现功能：

1. 服务端一次返回压缩包下多张图片
2. 前端列表展示多张图片

技术背景：

1. 前端基于ant.design of React
2. 后端基于java

前端实现（routes层）

//imageList 是从后端拿到的base64列表
updateMages = (imageList) =>{
  var fileList = [];
  imageList.forEach(function (image) {
    let item = {};
    item["src"] = image;
    fileList.push(item);
  })
  this.setState({fileList:fileList});
}
//渲染部分
render（）{
	const {fileList} = this.state;
	return(
		<Zmage src = {fileList[0].src} set={fileList}/>)}

后端实现（service层）

//省略controller层

public List<String> queryImages(){
    List<String> resultList = new ArrayList<>();
    String filePath = datadir; //真实文件路径
    File file = new File(filePath);
    if(file.exists()){
        try{
            ZipFile zipFile = new ZipFile(filePath);
            if(!zipFile.isValidZipFile()){
                logger.error("zip file is invallid");
            }
            List fileHeaderList = zipFile.getFileHeaders();
            for(int i=0; i<fileHeaderList.size(); i++){
                FileHeader fileHeader = (FileHeader) fileHeaderList.get(i);
                if(fileHeader!=null){
                    ZipInputStream is = zipFile.getInputStream(fileHeader);
                    long fileSize = fileHeader.getUncompressedSize();
                    ByteArrayOutputStream buffer = new ByteArrayOutputStream((int) fileSize);
                    int readLen;
                    byte[] buffer = new byte[4096];
                    while ((readLen = is.read(buffer)) !=-1){
                        buffer.write(buffer, 0, readLen);
                    }
                    is.close();
                    byte[] data = buffer.toByteArray();
                    BASE64Encoder encoder = new BASE64Encoder();
                    String baseStr = encoder.encode(data);
                    String imgStr = "data:image/jpeg;base64,"+baseStr;
                    resultList.add(imgStr);
                }
            }
        }catch (Exception e){
            e.printStackTrace();
        }
    }
    return resultList;
}

问题

1. 之前使用HttpSerletResponse+OutputStream只能返回单张图片的字节流
2. 搜索关键字“服务端返回多张图片”的相关资料非常少，坚持不懈的百度，终于看到了一个将图片转换为base64返回给前端的，不过那篇文章写的是返回单张图片的例子，既然返回的是string那就也可以返回list，尝试了一下终于成功了！！！
3. 上述提到的博文链接
   非常感谢！