Vue 上传图片进行压缩

1. 需求说明

H5项目，涉及图片上传，对上传的图片做了大小限制，比如 10MB，可能涉及到 OCR 识别（第三方识别的图片大小限制在 2MB），故需要对图片进行压缩。这里，使用了插件 image-conversion 。

2. 使用库版本说明

{
    "vant": "2.5.4",
    "vue": "^2.5.2",
    "image-conversion": "^2.1.1",
}

3. 具体使用

<template>
    <div>
        <van-uploader
            v-model="fileList"
            :max-count="maxCount"
            :max-size="size * 1024 * 1024"
            :before-read="beforeRead"
            :after-read="afterRead"
            :before-delete="deleteImg"
            @oversize="overSize">
      </van-uploader>
    </div>
</template>

<scirpt>
import * as imageConversion from 'image-conversion';
export default {
    props: {
        size: { // 图片大小,如果为 0 则不限制大小,以 M 为单位
            type: Number,
            default: 2, // 默认 2M
        },
    },
    ... // 此处省略
}
</script>

• beforeRead 在上传图片到文件服务器之前，进行是否允许上传判断（例如，图片格式限制及图片大小限制）;
• afterRead 允许上传图片后，进行图片压缩，压缩完成之后上传至文件服务器

// afterRead
afterRead(file) {
    const fileFront = file.file
    new Promise((resolve, reject) => {
        // console.log("压缩前", file) // 压缩到 1MB，大于 1MB 的图片都会进行压缩，小于则不会
        imageConversion.compressAccurately(fileFront, 1024).then((res) => {
            res = new File([res], fileFront.name, { type: res.type, lastModified: Date.now() })
            // console.log("压缩后", res)
            resolve(res)
        })
    }).then(responseRes=> {
        // 上传图片至文件服务器
    })
}

4. 最后

观察图片压缩前后大小变化，及压缩后的图片是否模糊（如果模糊，则需进行相应的调整）。