vue压缩图片压缩质量

在Vue中压缩图片的质量可以通过使用第三方库来实现。一个常用的库是`compressorjs`，它提供了一种简单的方式来压缩图片并指定压缩质量。

下面是一个使用`compressorjs`库来压缩图片质量的示例代码：

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

<script>
import Compressor from 'compressorjs';

export default {
  methods: {
    compressImage(event) {
      const file = event.target.files[0];
      const options = {
        quality: 0.8, // 设置压缩质量，范围是0-1，1表示最高质量
        success(result) {
          // 压缩成功后的回调函数
          console.log('压缩后的图片:', result);
        },
        error(err) {
          // 压缩失败后的回调函数
          console.error('压缩失败:', err.message);
        },
      };

      new Compressor(file, options);
    },
  },
};
</script>

上述代码中，我们通过`<input>`元素监听文件选择事件`@change`，当用户选择了一个文件后，将文件传递给`Compressor`实例，并传入压缩选项。其中`quality`选项指定了压缩质量，可以根据需要设置为0到1之间的值，1表示最高质量。

在压缩成功后，`Compressor`会调用`success`回调函数，并将压缩后的图片作为参数传递进去。