<el-upload
  class="upload-demo"
  action
  :http-request="handleUploadForm"
  :on-change="imgSaveToUrl"
  :headers="myHeaders"
  :show-file-list="false"
  multiple
>
<el-button
  icon="el-icon-upload2"
  size="small"
  class="mr15"
  v-if="!pictureType"
></el-button>
<template #trigger></template>
</el-upload>

data() {
  myHeaders: { "X-Token": getToken() },
}

 // 选取图片后自动回调，里面可以获取到文件
    imgSaveToUrl(event) {
      // 也可以用file
      this.localFile = event.raw // 或者 this.localFile=file.raw

      // 转换操作可以不放到这个函数里面，
      // 因为这个函数会被多次触发，上传时触发，上传成功也触发
      let reader = new FileReader()
      reader.readAsDataURL(this.localFile) // 这里也可以直接写参数event.raw

      // 转换成功后的操作，reader.result即为转换后的DataURL ，
      // 它不需要自己定义，你可以console.integralLog(reader.result)看一下
      reader.onload = () => {
        // console.integralLog(reader.result)
      }

      /* 另外一种本地预览方法 */
      let URL = window.URL || window.webkitURL
      this.localImg = URL.createObjectURL(event.raw)
    },

// 上传
handleUploadForm(param) {
  // 压缩图片并上传
  this.compressImage(this.localFile, (compressedFile) => {
    const formData = new FormData()
    const data = {
      model: this.modelName
        ? this.modelName
        : this.$route.path.split("/")[1],
      pid: this.tableData.pid
    }
    formData.append("multipart", compressedFile)
    let loading = this.$loading({
      lock: true,
      text: "上传中，请稍候...",
      spinner: "el-icon-loading",
      background: "rgba(0, 0, 0, 0.7)"
    })
    fileImageApi(formData, data)
      .then((res) => {
        loading.close()
        this.$message.success("上传成功")
        this.tableData.page = 1
        this.getFileList()
      })
      .catch((res) => {
        loading.close()
      })
  })
},

主要是这个代码

  compressImage(file, callback) {
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = (e) => {
        const img = new Image()
        img.src = e.target.result
        img.onload = () => {
          const canvas = document.createElement("canvas")
          const ctx = canvas.getContext("2d")

          // 设置压缩后的宽度和高度
          const maxWidth = 800 // 最大宽度
          const maxHeight = 800 // 最大高度
          let width = img.width
          let height = img.height

          if (width > maxWidth || height > maxHeight) {
            if (width / height > maxWidth / maxHeight) {
              width = maxWidth
              height = Math.round(maxWidth * (img.height / img.width))
            } else {
              height = maxHeight
              width = Math.round(maxHeight * (img.width / img.height))
            }
          }

          canvas.width = width
          canvas.height = height

          // 绘制压缩后的图片
          ctx.drawImage(img, 0, 0, width, height)

          // 转换为 Blob
          canvas.toBlob(
            (blob) => {
              const compressedFile = new File([blob], file.name, {
                type: file.type
              })
              callback(compressedFile) // 返回压缩后的文件
            },
            file.type,
            0.7 // 压缩质量（0~1，值越低压缩率越高）
          )
        }
      }
    },