JavaScript 中图片如何转为 base64 字符串

什么是base64字符串？

图片的 base64 编码就是可以将一个图片数据编码成一串字符串，使用该字符串代替图像地址。

base64 是传输 8Bit 字节代码的编码方式，把原本二进制改为 64 个字节单位并组成字符串。

base64 是会和 html 和 css 一起下载到浏览器中的，减少 http 请求和跨域问题。

为什么要使用base64字符串？

优点：

• 图片的下载始终需要向服务器发送请求，若将图片转为base64字符串，则可以以字符串的形式保存至内存中，不用再发送HTTP请求，提高性能。
• base64格式的图片是文本格式，占用内存小，转换比例大概为1/3，降低了资源服务器的消耗。

缺点：

• base64格式的文本内容比较多，存储在数据库中增大了数据库服的压力。
• 网页加载图片虽然不用访问服务器了，但由于base64内容太多，所以加载网页的速度会降低，可能影响用户体验。
• base64无法缓存，要缓存只能缓存包含base64的文件，比如js或css，这比直接缓存图片要差很多，而且HTML改动一般比较频繁，基本得不到缓存效益。

将图片转为base64字符串

使用 FileReader来读取客户端上传的图片文件

调用 .readAsDataURL 方法，实现图片转为base64字符串

调用.onload方法，当文件读出base64字符串后，将会触发该方法，获取转换的结果。

给 img 标签渲染

//  创建FileReader 对象
const fr=new FileReader()
// 调用 readAsDataURL 方法-----------读取文件内容
fr.readAsDataURL(files[0])
// 监听 fs 的 onload 事件
fr.onload=(e)=>{
    // 通过e.target.result 获取到读取的结果 值为base64字符串
    this.avatar = e.target.result;
)

// 使用-----------img 标签渲染
<img :src="`data:image/png;base64,${base64的地址}`" />

将图片转为临时链接

更改图片为链接地址 : 将图片文件转为内存地址（这个地址只能在 js 的内存里 不能发给后台）

const imgURL = URL.createObjectURL(文件) // 返回值：内存里的临时地址