el-upload 图片压缩

el-upload可以通过before-upload属性对用户上传的图片进行压缩处理。具体实现方法如下：

1.在Vue组件中定义beforeUpload方法，该方法接收一个file参数，表示用户选择的图片文件。

2.在beforeUpload方法中，可以使用HTML5的FileReader对象读取图片文件，并使用canvas对图片进行压缩处理。

3.压缩完成后，将压缩后的图片文件作为参数传递给compressAccurately回调函数，该函数会在el-upload上传之前被调用。

下面是一个示例代码：

<template>
  <el-upload
    action="#"
    :show-file-list="false"
    :before-upload="beforeUpload"
    accept=".jpg,.jpeg,.png"
  >
    <el-button size="small">选择图片</el-button>
  </el-upload>
</template>

<script>
export default {
  methods: {
    beforeUpload(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = (event) => {
          const img = new Image()
          img.src = event.target.result
          img.onload = () => {
            const canvas = document.createElement('canvas')
            const ctx = canvas.getContext('2d')
            canvas.width = img.width
            canvas.height = img.height
            ctx.drawImage(img, 0, 0, img.width, img.height)
            canvas.toBlob((blob) => {
              resolve({ file: blob })
            }, 'image/jpeg', 0.7)
          }
        }
      })
    }
  }
}
</script>

在上面的代码中，我们使用了Promise对象来异步处理图片压缩。在beforeUpload方法中，我们首先使用FileReader对象读取用户选择的图片文件，并将其转换为base64编码的字符串。然后，我们创建一个Image对象，并将其src属性设置为base64编码的字符串。当Image对象加载完成后，我们创建一个canvas对象，并使用canvas的drawImage方法将图片绘制到canvas上。最后，我们使用canvas的toBlob方法将canvas对象转换为Blob对象，并将其作为参数传递给resolve方法。在resolve方法中，我们将Blob对象封装为一个对象，并将其作为Promise对象的返回值。

需要注意的是，在canvas的toBlob方法中，第三个参数表示压缩质量，取值范围为0到1，1表示最高质量，0表示最低质量。在上面的代码中，我们将压缩质量设置为0.7。