数据交互系列：如何理解开发过程中的“图片转base64”编码方式,dataURL是什么？

@德玛玩前端

已于 2024-01-07 12:48:10 修改

阅读量755

点赞数 3

CC 4.0 BY-SA版权

分类专栏：交互文章标签： javascript 前端开发语言

于 2023-04-03 12:27:45 首次发布

本文链接：https://blog.youkuaiyun.com/Code_King006/article/details/129912243

交互专栏收录该内容

7 篇文章

订阅专栏

文章讲述了在前端开发中，如何将后端接口返回的二进制图片数据转换成dataURL，赋值给图片的src属性以预览图片。通过使用FileReader的readAsDataURL方法，将Blob对象转换为dataURL，实现本地处理图片，避免了网络传输的额外开销。这种方法适用于图片裁剪等需要在上传前处理图片的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在开发中，前端通常会遇到这样一个场景：
后端给的接口返回的图片数据是一串二进制数据，需要将数据转换成dataurl，然后赋值给图片的src的属性，那么该怎么做呢？

<body>
     <div id="box"></div>
     <script  >
            let box=document.getElementById('box')
            let img=document.createElement('img') 
            // getCodeImg是axios实例二次封装后的方法
             getCodeImg().then(res=>{
                       // res.data是一串二进制的数据
                       const blob=new Blob([res.data])  
                       var reader=new window.FileReader()
                       reader.readAsDataURL(blob)
                       reader.onload=function(){
                               // result是解析好的base64图片
                               img.src=reader.result  
                      }
             })
             box.appendChild(img)
      </script>
</body>

那么如何去理解dataurl和base64图片呢？

传统的图片上传模式

首先是用户选择一张图片
访问服务器ajax请求过去
服务器处理过后，会提供一个可以访问的url地址
显示图片的src，显示预览图

缺点

用户可能不一定要上传这张图片
图片较大会导致用户长时间看不到图片
有的时候选择图片之后，会有裁剪的需求，那么先上传再裁剪的方法就会多占用一次网络资源

更好的方法是

用户选择了图片之后直接在本地进行处理，跟网络无关
用户选择图片之后，生成dataurl，设置img的src显示预览图

dataUrl是什么？

本质上是一个固定格式的字符串，这个字符串可以直接替代url，文件或图片数据不用从远程服务器上去拿

格式

data:[<media type>]:[base64],<data>
             MiME类型  例如:application/javascript、text/plain等
             如果不使用base64，<data>可以使用原始类型的数据

图片是典型的二进制数据，就需要用到base64编码方式（将二进制数据转换成可打印字符）

示例

// 不管用
<input  type="file"/>
<img src="" id="preview" alt="">
<script>
       let inp=document.querySelector('input')
       inp.onchange=function(){
                  console.log(this.files[0]) //因为可以上传多个文件
                  
                  const inp=document.querySelector('input')
                  // 对于文件而言，本质就是一个流式数据
                  // 创建流式读取器
                  const  reader=new FileReader()
                  reader.onload=function(e){
                           // 通过事件参数e拿到读取结果
                           console.log(e.target.result) // 获取到dataURl
                           // 可以直接给src赋值这个字符串
                           preview.src=e.target.result
                           // 如果上传的是一张图片，就可以对图片进行任意的操作，例如	裁剪，调色，整个过程不需要用到网络传输
                           // 操作完之后上传服务器 。。。。。。。。。。。。。
                  }
                  reader.readAsDataURL(this.files[0]) //异步
       }
</script>