我们项目里目前主要有三种图片资源类型

第三方图片资源、本地SVG、本地base64

这三种对应不同的使用场景：

对于新的图片，可以直接采用本地上传之后进行转换。

对于已有的图片或者接口返回的图片资源，大多是第三方资源，这种情况下将资源下载之后再进行转换。

完成转换的关键点是借助 FileReader 读取图片数据和返回该图片的 Base64 字符串。

支持多选

选择图片之后可以得到它的 files 属性，值是数组类型。

前面得到的图片的 files 值是数组，所以转换时需要进行循环处理，逐个转换。

使用 FileReader 的 readAsDataURL 方法读取文件之后，result 值会是 Base64 字符串。

result 值的获取，则是通过 FileReader 的 onloadend 事件，在文件读取结束之后，被包含在 ProgressEvent ******对象，在该对象的 target 属性下。

我把 ProgressEvent 的值打印出来：

知识点补充

FileReader.onloadend：处理loadend事件。该事件在读取操作结束时（要么成功，要么失败）触发。

FileReader.readAsDataURL()：开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL 格式的 Base64 字符串以表示所读取文件的内容。

在 div 标签下新增 textarea 标签，回显图片 base64 字符串值。

第三方图片资源，在获取图片的 base64 字符串之前，要先从远程将资源请求到本地。

这里我是借助 XMLHttpRequest 请求图片URL，获取图片数据：

open 方法，会初始化一个请求。

因为 FileReader.readAsDataURL指定了读取Blob类型数据，所以通过 xhr.responseType 定义响应类型为 blob。

请求完成之后会触发 onload 事件，这时便可以拿到响应的正文，响应正文存放在 response 属性中。因为前面设置了 responseType 的值为 blob，所以这里返回了 Blob 类型。

打印一下结果：

注：

1、open 方法只能在 JavaScript 代码中使用。

2、response中返回的类型为 ArrayBuffer、Blob、Document、JavaScript Object 或字符串中的一个。这取决于请求的 responseType 属性。

小课堂会不定期出现，分享特定场景中遇到的问题，以及我的解决方案。（不过方案可能不是最佳或因人而异，主要用做抛砖引玉。）

最近我在三省吾身的时候，发现了一种状况，才猛地发现除了开发舒适圈，其实还有其他类型舒适圈。虽然对于开发者来说可能不太常见，但是会有一定程度上的影响，比如沟通舒适圈。

如果经常固定的和一组人一起工作，相互之间会形成一定度的默契感。

每次任务在相互配合时，无需过多言语，便可以顺利进行。

如果临时接到不熟悉的项目的时候，新接触的人，思维模式会和自己的认知产生偏差。可能会导致沟通时的观念障碍。

如果不能及时做出调整，可能会有一些负面影响，比如双方的无效沟通，会消耗更多的时间。

有一点需要额外注意的是，转换固有思维，站在对方的角度，并不是潜意识中的「我要一味迁就对方」。

而是适当的研究对方对于开发技术的了解程度，尽可能用对方能理解的方式交换沟通的效率。

也可以在发现沟通的差异点之后，提前和对方确定部分可以做统一意见的内容。

base64 转换的灵感来自七老的 《chatgpt，能帮我将html中的图片转为base64吗？》

因为我当时也在做一个功能需要把七牛云的资源转换成 base64，顺便把两种方式下的功能都实现了下。

捎带着熟悉了一下 FileReader 的相关知识点，温故而知新。

以上就是本次分享的内容。如果觉得有帮助，欢迎留言讨论、点赞 、收藏，持续产出技术分享。

我是 叶一一，非职业「传道授业解惑」的技术博主。「趣学前端」、「CSS畅想」系列作者。

华夏美食、国漫、古风重度爱好者，刑侦、无限流小说初级玩家。

欢迎技术或非技术问题的讨论。

本文正在参加「金石计划」