elementUI压缩图片和将图片转成base64格式

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

一、Base64的优点和缺点

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

1. 优点

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

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

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

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

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

2. 缺点

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

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

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

// 获取图片转base64
    getBase64(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转成File
    let 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})