小洛的前端技术博客Appearance
图片压缩大小不超1M
有些情况服务器不想存储过大的图片，所以需要压缩图片，前端压缩图片通常会用Canvas或者一些现有的库。手动用Canvas处理可能比较麻烦，尤其是处理不同格式的图片（比如JPEG、PNG）时，压缩策略可能不同。使用compressorjs，这个库封装了图片压缩的功能，支持质量、尺寸调整，并且处理起来比较方便。
安装compressorjs库
sh
npm install compressorjs
# 或者cdn引入
<script src="https://cdn.jsdelivr.net/npm/compressorjs@1.2.1/dist/compressor.min.js"></script>npm install compressorjs
# 或者cdn引入
<script src="https://cdn.jsdelivr.net/npm/compressorjs@1.2.1/dist/compressor.min.js"></script>示例代码：
vue
<template>
<input type="file" accept="image/*" @change="handleImageUpload" />
</template>
<script setup>
import { ref } from 'vue';
import Compressor from 'compressorjs';
const handleImageUpload = (e) => {
const file = e.target.files[0];
if (!file) return;
new Compressor(file, {
quality: 0.6,
maxWidth: 1920,
maxHeight: 1920,
convertSize: 1024 * 1024, // 超过 1MB 自动转换为 JPEG
success(result) {
// 二次检查文件大小
if (result.size > 1024 * 1024) {
// 如果仍然超过 1MB，进行二次压缩
compressFurther(result);
} else {
uploadImage(result);
}
},
error(err) {
console.error('压缩失败:', err);
}
});
};
const compressFurther = (file) => {
new Compressor(file, {
quality: 0.5,
maxWidth: 1280,
maxHeight: 1280,
success(result) {
uploadImage(result);
}
});
};
const uploadImage = (file) => {
const formData = new FormData();
formData.append('file', file, file.name);
// 这里替换为你的上传接口
fetch('/api/upload', {
method: 'POST',
body: formData
});
};
</script><template>
<input type="file" accept="image/*" @change="handleImageUpload" />
</template>
<script setup>
import { ref } from 'vue';
import Compressor from 'compressorjs';
const handleImageUpload = (e) => {
const file = e.target.files[0];
if (!file) return;
new Compressor(file, {
quality: 0.6,
maxWidth: 1920,
maxHeight: 1920,
convertSize: 1024 * 1024, // 超过 1MB 自动转换为 JPEG
success(result) {
// 二次检查文件大小
if (result.size > 1024 * 1024) {
// 如果仍然超过 1MB，进行二次压缩
compressFurther(result);
} else {
uploadImage(result);
}
},
error(err) {
console.error('压缩失败:', err);
}
});
};
const compressFurther = (file) => {
new Compressor(file, {
quality: 0.5,
maxWidth: 1280,
maxHeight: 1280,
success(result) {
uploadImage(result);
}
});
};
const uploadImage = (file) => {
const formData = new FormData();
formData.append('file', file, file.name);
// 这里替换为你的上传接口
fetch('/api/upload', {
method: 'POST',
body: formData
});
};
</script>