blob url图片转base64格式踩坑记录

在程序开发中,无论是大神还是菜鸡不可避免的,都会遇到一些很困扰人的问题。而其中,绝大多数可以通过搜索或者社区来解决。

然而最担心的就是那种资料很少无人问津无人分享的问题,恰好我上周末就遇到了一个这类型的棘手问题,幸运的是在经过了数个小时的尝试摸索还算填上了这个坑。

这个问题来自于使用Taro的UI组件库里的图片上传组件,组件已经封装好选择图片并渲染到组件上的事件。

然而当我将选择好的图片上传到服务器时,发现报错。于是看了下选择好的图片的url,发现是这样的格式blob:xxxxx。(看到一些提问似乎常用的element-ui的图片上传组件也遇到同样问题?我没亲测不确定)

查了一下网上,这个是blob url,而我这时的后端接口的参数接收的是base64格式的图片。

于是我查了一下blob转换base64的函数和库,经过十数次尝试发现都不成功。而后看到一些文章,零碎得到一些信息是:那些函数和库是将blob对象转换成base64的图片,然而我使用组件得到的是一个blob url(blob对象并不等于blob url),所以报错。

但是具体怎么将blob url转成base64,就怎么也找不到答案了。尝试了百度/google/SegmentFault /statckflow/各种社区和群,均没找到解决方案(很多人也许知道,但仅仅指一个大概方向却没有给出明确的解决方式)。

昨天上班时,问了一下我隔壁同事有没有处理过图片blob上传的问题,他说没有。但是他有印象做过与blob稍微相关的业务并找给我看。

我看了一下,他写过的逻辑是下载文件,需要对一个链接使用axios请求库发起请求后下载到本地。其中特别让我恍然大悟的是请求库设置了一个属性是responseType:'blob',如下

axios({
    url:,
    type:'get',
    responseType:'blob'
}).then(res=>{
    //dosomething...
})

我立刻尝试使用同样的方式对组件库里图片的blob url发起一次这般的请求,果然返回了一个对象(但没判断出来是不是blob对象)

不过后面的尝试,可以证明如此,并最终用上网上找到的代码示例成功的转换成了base64图片。

其实整个逻辑是:

然而网上的资料其实缺少了第一步,也是直接导致我在这个问题上花费了好几个小时。

之后我把整个逻辑封装成一个方法


const blobUrlToBase64 = bob_url => {
  return new Promise((resolve,reject)=> {
    axios({
      url:bob_url,
      type:'get',
      responseType:'blob'
    }).then(res=>{
      var a = new FileReader();
      a.onload = function (e) { resolve(e.target.result.replace('text/plain', 'image/png')); }
      //这里需要注意把拿到的字符串中文本的地方替换成图片才能正常拿到图片格式
      a.readAsDataURL(res.data);
    }).catch(e=>{
      reject(e)
    })
  })
}

写下本文,也是希望将来有网友遇到同样的问题可以搜索到我这篇文章并快速解决,不至于像我差点栽进坑里出不来吧。