vue图片压缩方法

安装image-compressor.js

//npm 安装
npm install image-compressor.js

新建utils文件，将以下内容cv

import Compressor from 'image-compressor.js';
// export default function ImageCompressor(file, backType, quality) {
export default function ImageCompressor(file) {
    return new Promise((resolve, reject) => {
        new Compressor(file, {
            quality: .6, //压缩质量
            maxWidth: 6000,
            maxHeight: 6000,
            minWidth: 10,
            minHeight: 10,
            width: 1000, // 指定压缩图片宽度
            height: 1000, // 指定压缩图片高度
            // 压缩前回调
            beforeDraw: (result) => {
                console.log('压缩之前图片尺寸大小: ', result)
            },
            success(result) {
                // console.log(result, 'result');
                console.log('压缩之后图片尺寸大小: ', result.size / 1024)
                console.log('实际压缩率： ', ((file.size - result.size) / file.size * 100).toFixed(2) + '%');
                // if (!backType || backType == 'blob') {
                //     resolve(result)
                // } else if (backType == 'file') {
                //     resolve(file)
                // } else {
                //     resolve(file)
                // }
                const f = new File([result], result.name, {
                    type: result.type,
                    lastModified: result.lastModified,
                    size: result.size
                })
                resolve(f);
            },
            error(err) {
                console.log("图片压缩失败");
                reject(err);
            }
        })
    })
}

在需要引用压缩功能的页面引用

import ImageCompressor from '../../utils/image-compressor';

写入方法

async uploadPic(file) {
            let newFile = await ImageCompressor(file.file, 'file', 0.6);
            // 这时候我们创建一个formData对象实例
            const formData = new FormData();
            // 通过append方法添加需要的file
            formData.append("file", newFile);
            addFile(formData, this.deviceId).then(res => {
                if (res.code === 200) {
                    this.$message.success('上传成功')
                    this.getPic()
                } else {
                    this.$message.error('上传失败')
                }
            })
        }

element组件的上传可以使用自定义方法

:http-request="uploadPic"

http-request 覆盖默认的上传行为，可以自定义上传的实现