当前位置：首页 > article >正文

Element Plus上传图片前，对图片进行压缩

article 2024/9/27 6:20:26

在使用 Element Plus（一个基于 Vue 3 的现代组件库）进行文件上传时，你可能希望在上传图片之前对其进行压缩以减少文件大小，从而提高上传速度和节省存储空间。为了实现这一功能，你可以结合使用 JavaScript 库来处理图片的压缩。

下面是一个简单的示例，展示如何在 Element Plus 中使用 compressorjs 进行图片压缩：

安装必要的依赖:
首先需要安装 compressorjs，可以通过 npm 或 yarn 安装：
```
npm install --save compressorjs
# 或者
yarn add compressorjs
```
导入并使用 Compressor:
在你的 Vue 组件中导入 Compressor 并使用它来压缩图片文件。
定义一个上传方法:
在 Vue 组件的方法中定义一个用于处理文件选择的函数，并在其中调用压缩逻辑。

下面是一个具体的 Vue 3 + Element Plus 的示例代码：

<template>
	<el-upload
		ref="upload"
		class="upload-btn"
		action="api/user/uploadAvatar"
		:on-success="excelUploadSuccess"
		:on-error="excelUploadError"
		:on-change="filehandleChange"
		:before-upload="compressImage"
		:auto-upload="false"
		:show-file-list="false"
	>
		<template #trigger>
			<el-avatar :src="imgurl" size="large" />
		</template>
	</el-upload>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ElMessage, ElNotification, UploadInstance, UploadProps, UploadRawFile, genFileId } from "element-plus";
import Compressor from "compressorjs";

const upload = ref<UploadInstance>();
const emits = defineEmits(["uploaded"]);

const props = defineProps({
	src: {
		type: String,
		default: ""
	}
});

const imgurl = ref(props.src);

function compressImage(file: any) {
	return new Promise((resolve, reject) => {
		new Compressor(file, {
			quality: 0.9,
			success(result) {
				// 压缩成功后的处理
				const compressedFile = new File([result], file.name, { type: result.type });
				// 可以在这里预览、上传或者做其他处理
				console.log("Compressed file:", compressedFile);
				// 如果需要上传，可以在这里执行上传操作
				resolve(compressedFile);
			},
			error(err) {
				reject("压缩失败");
				console.log("Compressor error:", err.message);
			}
		});
	});
}

const filehandleChange = (file: any, fileList: any) => {
	const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
	const whiteList = ["jpg", "jpeg", "png"];
	const isSuffix = whiteList.indexOf(fileSuffix.toLowerCase()) === -1;
	const isLt2M = file.size / 1024 / 1024 > 2;
	let msg;
	if (isSuffix) {
		msg = "上传图片只能是 'jpg','jpeg', 'png'格式";
	}
	if (isLt2M) {
		msg = "上传文档大小不能超过 2MB";
	}
	if (msg) {
		ElMessage({
			type: "error",
			message: msg
		});
		upload.value!.clearFiles();
		return;
	}
	upload.value!.submit();
};

// 上传错误提示
const excelUploadError = (): void => {
	upload.value!.clearFiles();
	ElMessage({
		message: "上传失败！",
		type: "error"
	});
};
// 上传成功提示
const excelUploadSuccess = (response: any): void => {
	upload.value!.clearFiles();
	ElMessage({
		message: "上传成功！",
		type: "success"
	});
	imgurl.value = "/api/fileMgr/download?token=" + response.data;
	emits("uploaded", response);
};
</script>
<style lang="scss" scoped>
.upload-btn {
	display: inline-block;
	vertical-align: middle;
	margin-left: 10px;
}
</style>

在这个示例中，我们首先检查用户是否选择了图片文件。如果是，则使用 Compressor 对其进行压缩。压缩完成后，可以进行预览、上传等操作。

compressorjs基本用法

创建一个新的 Compressor 实例，并传递给它一个文件对象以及一些配置选项：

import Compressor from 'compressorjs';
new Compressor(file, options, callback);

file: 要压缩的文件对象。
options:
- quality: 压缩质量，默认值为 0.6。对于 JPEG 图像，较低的值会导致更小的文件大小但画质较差；对于 PNG 图像，建议使用 1 来保持透明度。
- maxWidth: 最大宽度，默认为 1600。
- maxHeight: 最大高度，默认为 1600。
- resize: 是否自动调整尺寸，默认为 true。
- mimeType: 输出文件的 MIME 类型，默认为原文件类型。
- convertSize: 将文件转换为小于指定大小的字节数，默认为 Infinity。
- rotate: 自动旋转图片，根据 EXIF 数据，默认为 false。
callback: 一个可选的回调函数，当压缩完成时会被调用。