Vue与compressor.js实现高效文件压缩的方法_Javascript

前言

上传文件是一个常见的需求，并且文件大小往往成为限制因素之一。为了提升用户体验和节省带宽消耗，上传时的文件压缩便显得格外重要。本文将介绍基于 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 对象来处理异步操作，以实现图片上传时压缩大小的功能。