【vue】使用compressorjs压缩图片大小

在 Vue.js 应用中使用 compressorjs 来压缩图片是一个常见的需求。compressorjs 是一个轻量级的 JavaScript 图片压缩库，它可以用来减小图片文件的大小，从而优化性能。

下面是如何在 Vue.js 项目中使用 compressorjs 来压缩图片的步骤：

1、安装 compressorjs：
首先，你需要安装 compressorjs 包。如果你还没有安装它，可以通过 npm 安装：

npm install compressorjs --save

2、引入 compressorjs：
在你的 Vue.js 组件中引入 compressorjs：

import Compressor from 'compressorjs';

3、创建压缩方法：
创建一个方法来处理图片压缩。你可以将这个方法放在 Vue 组件的 methods 对象中。

methods: {
  compressImage(file) {
    // 创建一个 Compressor 实例
    new Compressor(file, {
      quality: 0.6, // 压缩质量，范围从 0 到 1
      success(result) {
        // 成功回调
        console.log('Compressed file:', result);
        // 你可以在这里上传压缩后的图片
      },
      error(err) {
        // 错误回调
        console.log('Error occurred while compressing image:', err.message);
      },
    });
  },
},

4、触发压缩：
你可以在用户选择图片后调用这个方法，例如通过一个文件输入 (<input type="file">)：

<template>
  <div>
    <input type="file" @change="onFileSelected" />
  </div>
</template>

在 Vue 组件中添加一个事件处理器来处理文件选择事件：

methods: {
  onFileSelected(event) {
    const file = event.target.files[0];
    if (file) {
      this.compressImage(file);
    }
  },

  // ... 上面定义的 compressImage 方法
},

5、处理压缩结果：
在 success 回调中，你可以处理压缩后的文件。例如，你可以上传压缩后的图片到服务器或预览压缩后的图片。

success(result) {
  // 上传压缩后的图片到服务器
  this.uploadImage(result);

  // 或者预览压缩后的图片
  const reader = new FileReader();
  reader.onloadend = () => {
    this.previewImage = reader.result;
  };
  reader.readAsDataURL(result);
},

uploadImage(file) {
  // 上传文件到服务器的逻辑
},

6、预览图片：
你可以在模板中添加一个 <img> 标签来预览压缩后的图片：

<template>
  <div>
    <input type="file" @change="onFileSelected" />
    <img :src="previewImage" alt="Preview" v-if="previewImage" />
  </div>
</template>

data() {
  return {
    previewImage: null,
  };
},