用vue的方式压缩图片

在 Vue 中，可以使用 `vue-image-compressor` 库来实现图片压缩。以下是一个使用 `vue-image-compressor` 库压缩图片的示例：

1. 安装 `vue-image-compressor` 库

npm install vue-image-compressor --save

2. 在组件中使用 `vue-image-compressor` 库

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

<script>
import Vue from 'vue'
import VueImageCompressor from 'vue-image-compressor'

export default {
  methods: {
    async compressImage(event) {
      // 获取选择的图片文件
      const file = event.target.files[0]

      // 压缩图片
      const compressedImage = await VueImageCompressor.compress(file, {
        quality: 0.7, // 压缩质量为70%
        maxWidth: 800, // 最大宽度为800像素
        maxHeight: 800 // 最大高度为800像素
      })

      // 输出压缩后的图片
      console.log(compressedImage)
    }
  }
}
</script>

在上面的示例中，首先通过 `import` 导入 `vue-image-compressor` 库，然后在 `compressImage` 方法中调用 `VueImageCompressor.compress` 方法来压缩图片。在 `compress` 方法中，可以配置压缩质量、最大宽度和最大高度等选项。最后返回压缩后的图片数据。

需要注意的是，由于 `vue-image-compressor` 库使用了 `canvas` 来进行图片压缩，因此需要确保浏览器支持 `canvas`。此外，也需要注意图片路径的问题，否则可能导致无法正确压缩图片。