有个后端让我在 JSON 中传文件日复一日、年复一年。 JSON里有个字段用来放文件。偶尔一起抽抽烟。我来给你传文件

我是一名前端，

每天都在写页面，

经常会做表单，

只要用户填完，

我就通过 axios 把 JSON 数据发给后端，

日复一日、年复一年。

突然有一天，

出现一个后端，

他在钉钉上跟我说：

你看是不是可以这样传，

JSON里有个字段用来放文件。

json-with-file-demand

我的心里咯噔一下，

默默地骂了一句傻蛋，

心想你小子是怎么进来的，

文件要用 form-data 传，

JSON 怎么能传文件！

然而我冷静了一下，

心想我是一名优秀的前端，

如果直接拒绝他，

后端会非常没面儿，

我们在同一个屋檐底下，

低头不见抬头见，

偶尔一起抽抽烟。

于是说：

哥们儿想法非常赞，

我来给你传文件。

合上电脑闭上眼，

左思右想怎么办，

突然灵光一现，

啊哈，

不要太简单，

base64来相见！

打开电脑撸代码：

<body>
  <input type="file" onchange="readFiles(event)" />
  <script>
    function readFiles(event) {
      var files = event.target.files
      if (files.length <= 0) return
      var reader = new FileReader()
      reader.readAsDataURL(files[0])
      reader.onload = function (e) {
        console.log(this.result) // 顺利拿到 base64 了
      }
    }
  </script>
</body>

顺利拿到 base64，

直接放到 JSON 里，

告诉后端弄好了，

继续摸鱼美滋滋。

本文基于职场真实故事改编，图片和代码均来源于真实业务场景，通过这个场景，希望大家都能掌握：

如何在前端将文件转换成 base64 格式
FileReader 的用法
1. readAsDataURL 即转换成 base64 字符串
2. readAsArrayBuffer 转换成 ArrayBuffer
3. readAsText 转换成文本字符串
File 和 Blob 的关系：Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作，File 是一种特殊的 Blob。