实现简单的分片上传和图片处理，解决大图片上传和显示问题

╰半夏微凉° 2023-01-11 08:38 333阅读 0赞

### 实现简单的分片上传和图片处理，解决了大图片上传和显示问题 ###

#### 一、概述 ####

当图片较小时，上传时间很快，而且可以直接显示原像素。

如果我们的图片达到几兆时，我就不说几个G了，我是为了模拟分片上传，并顺便解决我的垃圾服务器的上传速度慢问题。

而且，图片较大时，如果直接显示在前端，会因为文件过大加载很长时间，这就需要对图片进行处理。

[首发地址][Link 1]:[https://www.pomit.cn/p/3966177475463681][Link 1]

**如果大家正在寻找一个java的学习环境，或者在开发中遇到困难，可以[加入我们的java学习圈，点击即可加入][java]，共同学习，节约学习时间，减少很多在学习中遇到的难题。**

### 二、分片上传 ###

本次分块上传的主要思路是：

1.  前端发起分片上传请求到后端，后端处理生成唯一标识，返回前端
2.  前端切割文件，并发起上传动作，后端根据表中bitMap判断是否上传，并处理上传。
3.  每次执行完前端进度和后端返回进度只要大于99.9%就算完成，调用后端的结束接口，完成上传并校验。

#### 2.1 表与实体 ####

我用一张表来存储上传的图片记录，并配合实现分片上传，也可以用配置文件这种形式。这里只展示表列和字段的对应，不单独列出表：

@Data
    @Builder
    @NoArgsConstructor
    @AllArgsConstructor
    @Table(name = "f_resources")
    public class ResourceInfo { 
    	@Column(name = "file_path")
    	private String filePath;
    
    	@Column(name = "resource_url")
    	private String resourceUrl;
    
    	@Id
    	@Column(name = "resource_id")
    	private Long resourceId;
    
    	@Column(name = "create_time")
    	private Date createTime;
    
    	@Column(name = "is_slice")
    	private Integer isSlice;
    
    	@Column(name = "slice_num")
    	private Integer sliceNum;
    
    	@Column(name = "bit_map")
    	private Integer bitMap;
    }

*  file\_path是文件地址，resource\_url是对外地址，resource\_id唯一标识文件。
 *  is\_slice标明是否分块上传，slice\_num是分块总数，bit\_map是数字(需要转换成二进制)来表示上传进度。

#### 2.2 服务端处理分块上传 ####

##### **2.2.1 开始上传接口** #####

该接口的动作是前端发起分片上传请求到后端，后端处理生成唯一标识，返回前端。

/**
     * 分片上传
     * 
     * @param file
     * @param principal
     * @return
     */
    @RequestMapping(value = "/slicePictureStart", method = { RequestMethod.POST })
    public ResultModel uploadSlicePicture(SilceFileReq silceFileReq, Principal principal) {
    	try {
    		if (silceFileReq.getChunkTotalNum() < 1) {
    			return new ResultModel(ResultCode.CODE_00003);
    		}
    		SilceFileRes silceFileRes = resourceService.startSlicePicture(silceFileReq.getFileName(),
    				silceFileReq.getChunkTotalNum());
    		silceFileRes.setSliceProcess(0f);
    		return ResultModel.ok(silceFileRes);
    	} catch (Exception e) {
    		e.printStackTrace();
    		return new ResultModel(ResultCode.CODE_00004);
    	}
    }

这里，必须要把分片总数（chunkTotalNum）、文件名（fileName）提交，调用`resourceService.startSlicePicture`进行预处理，并返回对象`silceFileRes`.

resourceService.startSlicePicture:

/** * 开始分片上传 * * @param file * @return * @throws Exception */
    public SilceFileRes startSlicePicture(String fileName, Integer chunckNum) throws Exception { 
    	SilceFileRes silceFileRes = new SilceFileRes();
    	String datePath = DateUtil.format(new Date(), DateUtil.SimpleDatePattern);
    	String uploadPath = resourcesDir + resourcesRelative + SLICE_PATH + datePath + "/";
    	Long resourceId = resourceIdGenerator.nextId();
    	silceFileRes.setFileId(resourceId);
    	String newfileName = resourceId + fileName.substring(fileName.lastIndexOf('.'));
    	String filePath = uploadPath + newfileName;
    	String webPath = resourcesSlice + datePath + "/" + newfileName;
    	silceFileRes.setWebUrl(webPath);
    	File dir = new File(uploadPath);
    	if (!dir.exists()) { 
    		dir.mkdirs();
    	}
    	dir.setReadable(true, false);
    	dir.setExecutable(true, false);
    	dir.setWritable(true, false);
    	new File(filePath).createNewFile();
    
    	ResourceInfo resourceInfo = new ResourceInfo();
    	resourceInfo.setResourceId(resourceId);
    	resourceInfo.setFilePath(filePath);
    	resourceInfo.setResourceUrl(webPath);
    	resourceInfo.setCreateTime(new Date());
    	resourceInfo.setIsSlice(DbConstant.DB_SLICE_FILE);
    	resourceInfo.setSliceNum(chunckNum);
    	resourceInfo.setBitMap(0);
    	resourceInfoDao.save(resourceInfo);
    	return silceFileRes;
    }

在startSlicePicture这一步，生成了唯一标识resourceId(也就是fileId)，入库并生成文件。

##### **2.2.2 分片上传接口** #####

这里，bitmap的计算是这样的，

*  假如总共5个分片，那上传完成应该是11111，十进制就是31，表里的bitmap字段就是31.
 *  假如总共5个分片，1、2、5已经上传完成，那bitmap就是10011。这时，第4片上传成功，第4片的二进制是1000，10进制是8，这时，更新数据库就是`19 | 8 = 10011 | 1000 = 27`,等第3片上传完成再加上 4 即可。

updateBitMap：

@Update({
    	"<script>",
    	" update f_resources set",
    	"bit_map = bit_map | #{bitMap}",
    	" where resource_id=#{resourceId}",
    	"</script>"
    })
    int updateBitMap(@Param("resourceId") Long resourceId, @Param("bitMap") int bitMap);

因为多线程的存在，后端这个进度可能是不准确的，可以增加一次查询，使进度更准确点，也可以让前端去控制进度。

##### **2.2.3 分片完成接口** #####

完成接口，就是给一个进度的反馈（如果分片的文件并不是最终名称，可以在这个方法中将文件重命名）。

/** * 分片上传 * * @param file * @param principal * @return */
    @RequestMapping(value = "/slicePictureEnd", method = {  RequestMethod.POST })
    public ResultModel uploadSlicePicture(SilceFileReq silceFileReq, Principal principal) { 
    	try { 
    		ResourceInfo resourceInfo = resourceService.findById(silceFileReq.getFileId());
    		if (resourceInfo == null) { 
    			return new ResultModel(ResultCode.CODE_00011);
    		}
    		int complateProgress = (int) (Math.pow(2, resourceInfo.getSliceNum()) - 1);
    		if (resourceInfo.getBitMap() == complateProgress) { 
    			String md5 = DigestUtils.md5DigestAsHex(new FileInputStream(resourceInfo.getFilePath()));
    			SilceFileRes silceFileRes = new SilceFileRes();
    			silceFileRes.setWebUrl(resourceInfo.getResourceUrl());
    			silceFileRes.setFileId(silceFileReq.getFileId());
    			silceFileRes.setSliceProcess(100f);
    			silceFileRes.setMd5(md5);
    			return ResultModel.ok(silceFileRes);
    		}else { 
    			String totalBinaryNum = Integer.toBinaryString(resourceInfo.getBitMap());
    			int count = 0;
    			for (int i = 0; i < totalBinaryNum.length() && i < resourceInfo.getSliceNum(); i++) { 
    				if(totalBinaryNum.charAt(totalBinaryNum.length() - i - 1) == '1') { 
    					count ++;
    				}
    			}
    			return new ResultModel(ResultCode.CODE_00011, (float) count * 100 / (float) resourceInfo.getSliceNum());
    		}	
    	} catch (Exception e) { 
    		e.printStackTrace();
    		return new ResultModel(ResultCode.CODE_00004);
    	}
    }

这里，同时计算了个md5给前端。

##### **2.2.4 汇总接口（可以不汇总）** #####

我这里将三个接口汇总成一个接口，用type区分：

/** * 分片上传 * * @param file * @param principal * @return */
    @RequestMapping(value = "/uploadSlicePicture", method = {  RequestMethod.POST })
    public ResultModel uploadSlicePicture(SilceFileReq silceFileReq, Principal principal) { 
    	try { 
    		if (silceFileReq.getType() == 0) { 
    			if (silceFileReq.getChunkTotalNum() < 1) { 
    				return new ResultModel(ResultCode.CODE_00003);
    			}
    			SilceFileRes silceFileRes = resourceService.startSlicePicture(silceFileReq.getFileName(),
    					silceFileReq.getChunkTotalNum());
    			silceFileRes.setSliceProcess(0f);
    			return ResultModel.ok(silceFileRes);
    		} else if (silceFileReq.getType() == 2) { 
    			if (silceFileReq.getChunkTotalNum() < 1) { 
    				return new ResultModel(ResultCode.CODE_00003);
    			}
    			ResourceInfo resourceInfo = resourceService.findById(silceFileReq.getFileId());
    			if (resourceInfo == null) { 
    				return new ResultModel(ResultCode.CODE_00011);
    			}
    			int complateProgress = (int) (Math.pow(2, resourceInfo.getSliceNum()) - 1);
    			if (resourceInfo.getBitMap() == complateProgress) { 
    				String md5 = DigestUtils.md5DigestAsHex(new FileInputStream(resourceInfo.getFilePath()));
    				SilceFileRes silceFileRes = new SilceFileRes();
    				silceFileRes.setWebUrl(resourceInfo.getResourceUrl());
    				silceFileRes.setFileId(silceFileReq.getFileId());
    				silceFileRes.setSliceProcess(100f);
    				silceFileRes.setMd5(md5);
    				return ResultModel.ok(silceFileRes);
    			}else { 
    				String totalBinaryNum = Integer.toBinaryString(resourceInfo.getBitMap());
    				int count = 0;
    				for (int i = 0; i < totalBinaryNum.length() && i < resourceInfo.getSliceNum(); i++) { 
    					if(totalBinaryNum.charAt(totalBinaryNum.length() - i - 1) == '1') { 
    						count ++;
    					}
    				}
    				return new ResultModel(ResultCode.CODE_00011, (float) count * 100 / (float) resourceInfo.getSliceNum());
    			}
    		} else { 
    			if (silceFileReq.getFileId() == null || silceFileReq.getFile() == null) { 
    				return new ResultModel(ResultCode.CODE_00003);
    			}
    			ResourceInfo resourceInfo = resourceService.findById(silceFileReq.getFileId());
    			if (resourceInfo == null) { 
    				return new ResultModel(ResultCode.CODE_00011);
    			}
    			if (resourceInfo.getSliceNum() != silceFileReq.getChunkTotalNum()
    					|| silceFileReq.getChunkTotalNum() < silceFileReq.getChunkNum()) { 
    				return new ResultModel(ResultCode.CODE_00017);
    			}
    			Integer bitMap = resourceInfo.getBitMap();
    			String totalBinaryNum = Integer.toBinaryString(bitMap);
    			char[] bitArray = new char[resourceInfo.getSliceNum()];
    			for (int i = 0; i < totalBinaryNum.length() && i < resourceInfo.getSliceNum(); i++) { 
    				bitArray[i] = totalBinaryNum.charAt(totalBinaryNum.length() - i - 1);
    			}
    			if (totalBinaryNum.length() < resourceInfo.getSliceNum()) { 
    				for (int i = totalBinaryNum.length(); i < resourceInfo.getSliceNum(); i++) { 
    					bitArray[i] = '0';
    				}
    			}
    			SilceFileRes silceFileRes = new SilceFileRes();
    			int count = 0;
    			for (int i = 0; i < resourceInfo.getSliceNum(); i++) { 
    				char charZeroOrOne = bitArray[i];
    				if (charZeroOrOne == '1') { 
    					count++;
    				}
    			}
    			if (count >= resourceInfo.getSliceNum()) { 
    				silceFileRes.setFileId(silceFileReq.getFileId());
    				silceFileRes.setSliceProcess(100f);
    				return ResultModel.ok(silceFileRes);
    			}
    			Integer chunkNum = silceFileReq.getChunkNum();
    			if (bitArray[chunkNum - 1] == '0') { 
    				RandomAccessFile accessTmpFile = new RandomAccessFile(resourceInfo.getFilePath(), "rw");
    				accessTmpFile.seek((silceFileReq.getChunkNum() - 1) * (500 * 1024));
    				accessTmpFile.write(silceFileReq.getFile().getBytes());
    				accessTmpFile.close();
    				String bNum = "1";
    				for (int i = 1; i < chunkNum; i++) { 
    					bNum += "0";
    				}
    				Integer cnum = Integer.parseInt(bNum, 2);
    				resourceService.updateBitMap(resourceInfo.getResourceId(), cnum);
    			}
    			count++;
    			silceFileRes.setFileId(silceFileReq.getFileId());
    			silceFileRes.setSliceProcess((float) count * 100 / (float) resourceInfo.getSliceNum());
    			return ResultModel.ok(silceFileRes);
    		}
    	} catch (Exception e) { 
    		e.printStackTrace();
    		return new ResultModel(ResultCode.CODE_00004);
    	}
    }

#### 2.3 前端处理分块上传 ####

前端使用后端提供的汇总接口`user/uploadSlicePicture`。

这里，默认分块是500K，先请求接口分片开始，然后循环调用分片上传，当前端进度或者后端进度返回大于99.9，调用sliceUploadEnd()方法请求后端分片结束接口。

这里，使用SparkMD5进行前端的文件md5的计算。并和后端文件进行对比。

#### 2.4 Html分块进度 ####

<div id="modalUploadPicture" class="modal">
      <div class="modal-content">
        <h4>上传图片</h4>
    	    <div class="file-field input-field">
    	      <div class="btn" style="color: white;">
    	        <span>图片</span>
    	        <input type="file" id="uploadPictureFile">
    	      </div>
    	      <div class="file-path-wrapper">
    	        <input class="file-path validate" type="text">
    	      </div>
    	    </div>
      </div>
      <div class="modal-footer">
        <a href="javascript:uploadPictureNote()" class=" modal-action modal-close waves-effect waves-green btn-flat">确定</a>
        <a href="javascript:void(0)" class=" modal-action modal-close waves-effect waves-green btn-flat">关闭</a>
      </div>
    </div>
    <div id="modalUploadProcess" class="modal">
      <div class="modal-content">
        <h4>文件上传进度</h4>
        <div class="progress">
    	      <div class="determinate" id="processBarProcess" style="width: 0%"></div>
    	</div>
    	<div id="progressMessage" class="red-text">
    	     
    	</div>
      </div>
      <div class="modal-footer">
        <a href="javascript:void(0)" class=" modal-action modal-close waves-effect waves-green btn-flat">关闭</a>
      </div>
    </div>

modalUploadPicture窗口弹出之后，是这样的：

![在这里插入图片描述][d854ac0bc973aff25348c9e48f8d230d.png]

点击上传，弹出modalUploadProcess窗口，是这样的：

![在这里插入图片描述][837f01c35b0e66fd2300f34694b067ac.png]

分开上传完成有返回图片的地址，可以将图片显示在任意位置。

### 三、大图片压缩处理 ###

因为图片比较大，直接显示流量不允许，可以将图片进行压缩。

nginx有一个模块叫`ngx_http_image_filter_module`，网上有很多配置方法，但是在我的机器上，这个模块是nginx默认加载的。

因为加载了配置文件`/usr/share/nginx/modules/mod-http-image-filter.conf`；文件里就一句话`load_module "/usr/lib64/nginx/modules/ngx_http_image_filter_module.so";`

#### 3.1 压缩图片 ####

在nginx的配置文件中，增加这几行即可。

location /largepic/ {
    	alias /upload/slice/;
    	index index.html;
    	image_filter resize 300 400;
    	image_filter_buffer 10M;
    }

这是将图片按照300 \* 400的像素显示出来，缓冲区大小为10M，如果设置太小，就会出现无法加载图片的情况，默认是1M.

[Link 1]: https://www.pomit.cn/p/3966177475463681
[java]: https://jq.qq.com/?_wv=1027&k=52sgH1J
[d854ac0bc973aff25348c9e48f8d230d.png]: /images/20221119/2365db39043b4126b2a580ddb8d46dd8.png
[837f01c35b0e66fd2300f34694b067ac.png]: /images/20221119/bb71b3c01a3548ac9f0f65171d003241.png