持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情
开发问题记录--图片预览
问题描述：
服务视频回访的视频通话界面提供拍照截图的功能，坐席端通过点击“拍照截图”对当前视频通话的服务端视频窗口进行截图。在测试系统中，点击拍照截图后，在对应呼叫单编号的文件管理下面查看对应的拍照截图。
- 点击”预览“按钮后，发现拍照截图会有几率出现无法预览的问题。在本地代码运行之后，测试系统中无法预览的拍照截图，在本地运行后的系统中可以正常查看。
- 通过浏览器的调试功能，找到图片预览的地址，无法预览的截图，直接在浏览器新标签页中打开，可以查看。
- 本地系统中，图片的完整性出现偏差，在测试系统中无法预览的图片，在本地预览的时候会出现图片不全的情况。
问题查找：
-
数据库和服务器：数据库file表中存储的截图数据，在minio中根据对应目录可以找到对应文件，并且图片可以正常预览，所以排除数据库和服务器存在问题的可能。
-
后端代码：在idea里进行远端调试sit的的配置，通过在对应的预览功能代码区域打断点，发现在测试系统的正常预览的截图和不能预览的截图，后端代码的执行情况是一样的。本地系统和测试系统的后端代码执行流程是一样的。所以排除后端代码流程存在问题的可能。
-
前端代码： 通过chrome的调试功能，发现前端代码对后端接口的调用正常，调用请求顺利发出。但是在控制台爆出错误
net::ERR_CONTENT_LENGTH_MISMATCH 200，搜索这个问题代码，很多答案的解决办法是重启Nginx，但现在开发的这个系统根本没有部署Nginx，此法不通。 -
预览功能的实现逻辑：
在文件管理页面，点击预览，会发送两个请求：
- /queryFileByFileId，这个api的作用是根据当前屏幕截图的fileId找到预览所需要的信息，其中包括：filePath（文件的存储地址）和fileLength（文件大小）
- /fileOpration，这个请求根据之前获取的filePath和fileLength拼接成一个完整的http请求，通过这个链接可以直接查看当前图片。这个方法是通过分批下载的方式，实现图片预览。只需要传入对应大小的fileLength就可以获取到相应的文件。出现图片显示大小不对的情况，所以可能是图片链接里的文件大小不对。
-
检查文件大小：
不能预览的截图，在数据库中大小标记为532KB，在fileOpration链接中对应的fileLength是532000，在minio存储的文件大小是721KB，问题找到了，数据库中存储的文件大小和实际有出入，导致访问时图片加载不了实际的大小，所以无法访问。
解决办法
- 首先在图片的访问链接中修改fileLength的值，修改大小按照在minio中的实际大小计算。此时发现图片能全部显示
- 在数据库中将对应文件的大小修改到实际大小，发现测试系统的的图片预览也能正常显示。所以问题出现在了屏幕截图的文件大小信息写入数据的过程中
- 找到对应的数据库写入代码，修改大小计算方法，再次测试，新截取的图片，数据库中的大小和minio中的实际的大小相等，在测试系统中截图正常显示，本地系统正常显示。在两个系统中，图片的大小都保持正常。到此，所有问题解决。
