一次bug意识到了自己还只是个初级程序员

今天晚上系统上线的时候出现了一个奇怪的BUG，六张图片中有五张可以通过点击缩略图查看大图，其中有一张点击缩略图之后就会闪一下，然后浏览器中就多了个下载文件，这可把我整懵了，乱摸索一通之后，没找到啥原因，我就把接口查看大图的链接都拿出来比对，比了会找到了原因，就是那个无法查看的链接中图片格式是以heic这种的，如下

关于heic格式网上查了下好像ios11后，处理图片的格式，相比较jpeg占的空间比较小。

发现这个问题后，我试了下直接把heic换成jpeg后，在浏览器访问直接报错，当时也不知道咋处理。我就在群里说让app那边做下限制，不能上传这种格式的图片。怎料业务那边说不能这样，会给用户带来不好的体验，随后我就在群里艾特后端，问他能不能处理，他说不好处理，随后他就丢出掘金上的一篇heic转jpeg的文章，并说文章上都有，你按照这个处理，当时心里想的是，这位大哥都帮我找到解决办法了，再说不会的话，就有点丢人，毕竟群里说的人很多

点开文章一看，人懵了什么blob,arraybuffer,全都是一些只听过但全没接触过的，完全不知道咋下手，所以就把我组长叫来了，而我就拖了一张椅子乖乖低坐在旁边听课

文章大概讲述的方法就是通过一个方法判断是否为heic图片，如果是的话就用一个第三方包转成jpeg格式，包的名字好像是heic2any。组长看了下文章之后，就说首先得获取到这个图片arraybuffer(因为文章中就是用arraybuffer判断图片的类型)，他问我知道怎么获取啵(我都不知道axios还有这个属性），他看我想了一会没想出来就说可以通过axios访问这个链接然后把responsetype设为arraybuffer。拿到这个array后，组长试了下那篇文章说的方法，但没成功，原因是文章中判断图片类型的那个方法无论是什么图片输出的都是jpeg。然后组长说得换种思路，他看到文章中有一行new blob()类似的代码，在mdn上看了下blob的使用文档后说，可以试试将arraybuffer转为blob后，再转为base64，最后再看下如何去打开base64。arraybuffer转blob成功后，又在网上找了一个打开base64的方法，然后一运行果然成功了。成功后还组长帮我总结了一波，梳理了下思路。实现代码如下(有点小乱[泣不成声])

getImgInfo (url) {

axios({

method: 'get',

url,

responseType: 'arraybuffer'

}).then(res => {

const imgBlob = new Blob([res.data], { type: 'image/jpeg' })

const reader = new FileReader()

reader.readAsDataURL(imgBlob)

reader.onloadend = () => {

this.openBase64(reader.result)

}

})

},

openBase64 (base64Str) {

const img = new Image()

img.src = base64Str

const newWin = window.open(base64Str, '_blank') newWin.document.write(img.outerHTML)

},

此外这次观摩我组长的操作，让我体会最深的是我的调试技巧相比之下太low了，而且知识储备有点少。学吧！只要头发ha还在我就能一直学下去