为了降低资源服务器的消耗、有些时候需要前端压缩图片，转码等一些处理。

一、Base64的优点和缺点

图片转换成base64格式的优缺点

1. 优点

(1)base64格式的图片是文本格式，占用内存小，转换后的大小比例大概为1/3，降低了资源服务器的消耗；

(2)网页中使用base64格式的图片时，不用再请求服务器调用图片资源，减少了服务器访问次数。

(3)base64编码的字符串，更适合不同平台、不同语言的传输；

(4)算法是编码, 不是压缩, 编码后只会增加字节数，但是算法简单, 几乎不会影响效率，算法可逆, 解码很方便, 不用于私密信息通信;

(5)解码方便, 但毕竟编码了, 肉眼还是不能直接看出原始内容;

2. 缺点

(1)base64格式的文本内容较多，存储在数据库中增大了数据库服务器的压力；

(2)网页加载图片虽然不用访问服务器了，但因为base64格式的内容太多，所以加载网页的速度会降低，可能会影响用户的体验。

(3)base64无法缓存，要缓存只能缓存包含base64的文件，比如js或者css，这比直接缓存图片要差很多，而且一般HTML改动比较频繁，所以等同于得不到缓存效益。

// 获取图片转base64getBase64(file) {return new Promise(function(resolve, reject) {const reader = new FileReader()let imgResult = ''reader.readAsDataURL(file)reader.onload = function() {imgResult = reader.result}reader.onerror = function(error) {reject(error)}reader.onloadend = function() {resolve(imgResult)}})}

二、压缩图片的大小——image-conversion

image-conversion除了压缩图片体积，还可以压缩图片宽高比例等，具体参数使用可自行百度

1.安装模块

npm i image-conversion --save

2.引入imageConversion的compressAccurately ，进行压缩

// 引入image-conversion
import { compressAccurately } from 'image-conversion'

3.调用compressAccurately

// 压缩到100KB,这里的100就是要压缩的大小,可自定义
compressAccurately(file, 100).then(res => {var mfile = res// console.log('压缩好的文件',mfile)// console.log('压缩上传的图片大小',mfile.size)      //Blob转成Filelet files1 = new window.File([mfile],  //[文件]file.name, { type: file.type })
})

4、其中压缩好的文件默认是Blob类型

//利用File Api将blob转成File对象
let files = new window.File([this.blob], file.name, {type: file.type})