Vue + iView 项目中，文件上传组件Upload增加压缩图片功能（使用 image-conversion）

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

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

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

npm i image-conversion 

import * as imageConversion from 'image-conversion'

2.Upload组件

<Upload
      ref="uploader"
      name="file"
      :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,这里的400就是要压缩的大小,可自定义
                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)
                })
            })
        }

　调用imageConversion内的方法，这里需要注意的是，压缩后返回的是blob对象，而Upload组件需要接收到File文件对象才会将压缩后的进行上传，

否则不起作用，所以这里要对返回值处理成File对象

 

这样就实现了图片上传前的压缩处理。