vue 上传图片时压缩大小——image-conversion

本文链接：https://blog.csdn.net/Superman_peng/article/details/107740407

本文介绍了在Vue项目中如何利用imageConversion模块来压缩图片，包括安装模块、引入并使用该模块，以及两种压缩方法：压缩到指定大小和按质量比例压缩。通过示例展示了压缩前后图片文件大小的变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、安装模块

npm i image-conversion --save

2、引入imageConversion，进行压缩

在需要用到图片压缩的地方，引入imageConversion

in CommonJS:

const imageConversion = require("image-conversion");

in ES6:

import * as imageConversion from 'image-conversion';
or
import {compress, compressAccurately} from 'image-conversion';

3、实现

方法一：压缩到指定大小

//把图片文件作为参数传递到方法中
beforeAvatarUpload(file) {
	console.log(file)
	const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
		const isLt2M = file.size / 1024 / 1024 < 2;
		if (!isJpgOrPng) {
			this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
			return false;
		}
		if (!isLt2M) {
			this.$message.error('上传头像图片大小不能超过 2MB!');
			return false;
		}
		return new Promise((resolve) => {
			// 压缩到100KB,这里的100就是要压缩的大小,可自定义
			imageConversion.compressAccurately(file, 100).then(res => {
				console.log(res)
				resolve(res);
			});
            //compressAccurately有多个参数时传入对象
            //imageConversion.compressAccurately(file, {
                  // size: 1024, //图片大小压缩到1024kb
                  // width:1280 //宽度压缩到1280
       		//}).then(res => {
         			//resolve(res)
       		//})
		})
	},

分别输出压缩前和压缩后的结果，发现文件大小已经变小
在这里插入图片描述
本地大小：
服务器文件大小：

按照一定质量倍数进行压缩

以质量为0.6进行压缩

//把图片文件作为参数传递到方法中
beforeAvatarUpload(file) {
	console.log(file)
	const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
		const isLt2M = file.size / 1024 / 1024 < 2;
		if (!isJpgOrPng) {
			this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
			return false;
		}
		if (!isLt2M) {
			this.$message.error('上传头像图片大小不能超过 2MB!');
			return false;
		}
		return new Promise((resolve) => {
			imageConversion.compress(file,0.6).then(res=>{
			    console.log(res);
			    resolve(res);
		    })
	    }
	},