前言
上传文件是一个常见的需求，并且文件大小往往成为限制因素之一。为了提升用户体验和节省带宽消耗，上传时的文件压缩便显得格外重要。本文将介绍基于 Vue 框架和 compressor.js 的上传时文件压缩实现方法，通过在上传过程中对文件进行压缩，减小文件大小，提升上传速度，为用户创造更快捷、高效的上传体验。
安装
npm install image-compressor.js
yarn add image-compressor.js
compressor.js 常用的属性
| 属性 | 描述 |
|---|---|
| quality | 设置压缩图像的质量。值范围为0到1之间，其中0表示最低质量，1表示最高质量。 |
| width | 指定压缩图像的目标宽度。可以使用像素或百分比来表示。 |
| height | 指定压缩图像的目标高度。可以使用像素或百分比来表示。 |
| minWidth | 限制压缩后的图像宽度的最小值。如果图像的宽度小于此值，将不会进行压缩。 |
| minHeight | 限制压缩后的图像高度的最小值。如果图像的高度小于此值，将不会进行压缩。 |
| maxWidth | 限制压缩后的图像宽度的最大值。如果图像的宽度超过此值，将会按比例缩小。 |
| maxHeight | 限制压缩后的图像高度的最大值。如果图像的高度超过此值，将会按比例缩小。 |
| convertSize | 确定是否在压缩时调整图像的大小。如果设置为true，将根据目标宽度和高度自动调整图像大小。 |
| checkOrientation | 检查图像的方向信息，并根据需要进行自动旋转。 |
这些是 compressorjs 插件的一些常见属性，用于控制图像的压缩质量、尺寸和方向。你可以根据实际需求设置这些属性以获得想要的压缩效果。更多详细信息和属性，请参阅插件的官方文档。
封装文件
import ImageCompressor from 'image-compressor.js';
export default function compressFile(file) {
return new Promise((resolve, reject) => {
const options = {
success(result) {
// 将压缩后的 Blob 转换为 File 对象（如果组件支持Blob则不用这一步）
const compressedFile = new File([result], file.name, {
type: file.type,
lastModified: Date.now(),
});
resolve(compressedFile);
},
error(e) {
reject(e);
},
};
if (file.size > 5 * 1024 * 1024) {
options.quality = 0.6; // 压缩质量
options.convertSize = false;//不进行图像尺寸的调整
options.checkOrientation = false; // 图片翻转，默认为false
}
new ImageCompressor(file, options);
});
}
main.js
// 全局挂载
import compressFile from '@/utils/compressFile';
Vue.prototype.$compressFile = compressFile;
使用文件
<template>
<div>
<van-field label="照片">
<template #input>
<van-uploader :after-read="(file, detail) => clzpAfterRead(file, detail, 'xszzp')" v-model="cszp" :max-count="1" accept="image/*" />
</template>
</van-field>
</div>
</template>
<script>
import { uploadFile } from "@/api/publicApi";
export default {
data() {
return {
cszp: "",
};
},
mounted() {},
methods: {
async clzpAfterRead(file, detail, name) {
console.log(file.file.size, "未压缩大小");
// 调用压缩图片的方法 this.$compressFile
const compressedFile = await this.$compressFile(file.file);
console.log(compressedFile.size, "压缩后大小");
let formData = new FormData();
formData.append("file", compressedFile);
uploadFile(formData).then((res) => {
// 执行操作
});
},
},
};
</script>
实现过程
- 首先，需要在
Vue组件中引入ImageCompressor库。可以通过import ImageCompressor from 'image-compressor.js'来实现； - 下面是一个名为
compressFile的函数。该函数接受一个文件(file)作为参数，并返回一个Promise对象，用于处理异步操作； - 在
compressFile函数内部，创建了一个options对象，其中包含了成功(success)和错误(error)的回调函数； - 如果文件的大小超过
5MB，则设置options对象的quality属性为0.6，表示压缩质量为60%； - 接下来，创建一个
ImageCompressor实例，将文件和options对象作为参数传递给它。这将触发图片压缩的过程； - 当压缩成功时，会调用
success回调函数。在回调函数中，将压缩后的Blob对象转换为File对象，并使用resolve方法将其作为Promise的返回值返回； - 当压缩出错时，会调用
error回调函数。在回调函数中，使用reject方法将错误信息作为Promise的返回值返回； - 接下来是一个
Vue组件的模板代码。在模板中使用了van-uploader组件来实现图片的上传功能； - 在
methods属性中定义了一个名为clzpAfterRead的方法。该方法会在图片上传成功后触发。参数file表示上传的文件，detail表示上传的详细信息，name表示上传文件的名称； - 在
clzpAfterRead方法中，首先打印出上传文件的原始大小file.file.size。接下来，调用this.$compressFile方法对上传的文件进行压缩； - 使用
await关键字等待压缩操作完成，并将压缩后的文件赋值给compressedFile变量； - 打印出压缩后文件的大小
compressedFile.size； - 创建一个
FormData对象formData，并将压缩后的文件添加到formData中； - 调用
uploadFile方法，将formData作为参数传递给它，并使用.then方法处理上传成功后的响应； - 在
.then方法中可以执行后续操作，例如更新界面或处理上传成功的数据。
总结起来，这段代码的实现思路是：通过 van-uploader 组件实现图片上传功能，在上传成功后调用 clzpAfterRead 方法，将上传的图片文件通过 image-compressor.js 库进行压缩，并将压缩后的文件再次上传到服务器。整个过程使用了 Vue 框架以及 Promise 对象来处理异步操作，以实现图片上传时压缩大小的功能。
实现效果
