什么是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(文件) // 返回值:内存里的临时地址