vue项目中图片上传增加压缩功能（vue+iview+image-conversion）

对上传图片进行压缩的需求是非常常见的，简单来说，解决方式就是将图片base64或者canvas进行压缩转化，有很多工具包可以实现这种需求

这里以Vue + iView的upload组件 为例：用的是image-conversion （大部分UI组件的上传都有相同的钩子方法，大同小异）

1.安装依赖+组件中引入

npm i image-conversion 
import * as imageConversion from 'image-conversion'

2.Upload组件

<Upload
      ref="uploader"
      name="file"
      action="url"
      :type="(readonly || !isImage)?'select':type"
      :accept="acceptType"
      :max-size="maxSize"
      :beforeUpload="beforeUpload"
      :on-success="handleSuccess"
      class="posi-rela"
    >

其中最重要的就是 beforeUpload 这个方法，他会在文件上传之前执行，我们就是在这里进行图片的压缩

3.beforeUpload方法

beforeUpload(file) {
            return new Promise((resolve, reject) => {
                console.log('压缩前', file) // 压缩到400KB,大于400KB的图片都会进行压缩，小于则不会
                imageConversion.compressAccurately(file, 400).then(res => { // console.log(res)
                    res = new File([res], file.name, { type: res.type, lastModified: Date.now() })
                    console.log('压缩后', res);
                    resolve(res)
                })
            })
        }

beforeUpdate()里的这一部分代码就是进行图片的压缩，将传入的图片调用imageConversion内的方法，这里需要注意的是，压缩后返回的是blob对象，而Upload组件需要接收到File文件对象才会将压缩后的进行上传，否则不起作用，所以这里要对返回值处理成File对象

这个压缩的方法用的是现成的工具，如果对于原生的canvas的方式想了解的，可以移步
这一篇文章，用了一个案例介绍canvas压缩。