vue 图片压缩上传

Vue中实现图片压缩上传的方法如下：
1.引入插件：首先需要引入一个图片压缩上传的插件，例如`vue-image-compressor`。
2.安装插件：使用npm或yarn安装插件，命令如下：

npm install vue-image-compressor

或

yarn add vue-image-compressor

3.导入插件：在需要使用的组件中导入插件，并注册到Vue实例中，示例代码如下：

import Vue from 'vue'
import VueImageCompressor from 'vue-image-compressor'

Vue.use(VueImageCompressor)

4.编写模板代码：在组件模板中添加一个文件上传按钮，并绑定一个`@change`事件来处理文件选择，示例代码如下：

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

5.编写处理方法：在组件的`methods`选项中编写处理文件上传的方法，首先获取选择的文件，然后使用插件提供的压缩方法进行压缩，最后使用压缩后的图片进行上传，示例代码如下：

methods: {
  handleFileUpload(event) {
    const file = event.target.files[0]
    this.$compressImage(file, {
      quality: 0.6, // 压缩质量，范围为0到1（可选，默认为0.6）
      maxWidth: 800, // 最大宽度（可选，默认为800）
      maxHeight: 800 // 最大高度（可选，默认为800）
    })
      .then(compressedImage => {
        // 进行图片上传逻辑
      })
      .catch(error => {
        // 处理压缩失败的情况
      })
  }
}

在上述代码中，通过`this.$compressImage`来调用插件提供的压缩方法，传入的参数为选择的文件和一些可选的压缩参数。压缩成功后，会返回一个压缩后的图片，可以将其直接上传到服务器，或者进行其他的操作。

通过以上步骤，在Vue中实现了图片压缩上传的功能。注意，使用插件的具体使用方法可能会根据插件的不同而有所不同，请根据实际情况进行相应的调整。