vue+elementUI(el-upload)图片压缩,默认同比例压缩操作

首先需要明确的是，针对 vue+elementUI(el-upload) 图片压缩的操作，实际上是对于上传的图片进行处理，通过 JS 将图片进行压缩，最终实现 web 应用中图片大小的限制。

接下来，我们将分别从以下三个方面对此进行详细讲解：

1. 图片选择与压缩
2. 解决压缩后图片失去原有宽高比例的问题
3. 示例说明

1. 图片选择与压缩

我们可以通过 elementUI 中的 el-upload 组件来实现图片上传的操作，代码示例如下：

<template>
  <el-upload
    class="upload-demo"
    ref="upload"
    action="/upload"
    :before-upload="beforeUpload"
    :on-success="handleSuccess"
    :dragable="draggable"
    :on-exceed="handleExceed"
    :limit="limit"
    :file-list="fileList">
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: [], // 上传文件列表
      limit: 6, // 最大文件数量
      draggable: true, // 是否可拖拽上传
    }
  },
  methods: {
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt500k = file.size / 1024 < 500;
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
      }
      if (!isLt500k) {
        this.$message.error('上传头像图片大小不能超过 500KB!');
      }
      return isJPG && isLt500k;
    },
    handleSuccess(response, file, fileList) {
      // 上传成功后的操作
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 ${this.limit} 张图片`);
    },
  },
}
</script>

在 beforeUpload 方法中，我们限制了图片类型和大小，确保上传的文件都是符合要求的。

接下来，我们需要对文件进行压缩操作，通过 JS 来实现。我们可以使用 js-image-compressor 库，对应 CDN：(https://cdn.jsdelivr.net/npm/js-image-compressor@latest)。

可以使用以下命令进行安装：

npm install js-image-compressor -S

压缩图片的代码示例如下：

import ImageCompressor from 'js-image-compressor'

const imageCompressor = new ImageCompressor()

const file = this.$refs.upload.uploadFiles[0]; // 获取上传的文件

imageCompressor.compress(file, {
    maxSizeMB: 1, // 压缩后图片大小的最大值，这里为 1MB
    maxWidthOrHeight: 1920 // 压缩后图片的最大宽度或高度，这里为 1920px
}).then((result) => {
  // 处理压缩后的图片
}).catch((err) => {
  console.log(err)
})

2. 解决压缩后图片失去原有宽高比例的问题

在进行图片压缩后，我们会发现有些图片的宽高比例会失去原有比例，变得很奇怪。这是因为对于一些宽高比例大于 1:1 的图片，进行等比例缩放后，会出现黑边的情况，因此需要进行处理。

解决方法是通过使用 canvas 对压缩后的图片进行重新绘制，代码示例如下：

compressImg(file) {
  const imageCompressor = new ImageCompressor()

  imageCompressor.compress(file, {
    maxSizeMB: 1, // 压缩后图片大小的最大值，这里为 1MB
    maxWidthOrHeight: 1920 // 压缩后图片的最大宽度或高度，这里为 1920px
  }).then((result) => {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const img = new Image();

    img.src = URL.createObjectURL(result);

    img.onload = function () {
      // 绘制图片到 canvas 中
      ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, 100, 100);

      // 将 canvas 转化为 base64 格式的图片
      const compressImgData = canvas.toDataURL('image/jpeg', 0.8);
    };
  }).catch((err) => {
    console.log(err)
  })
}

通过对图片进行重新绘制，便可以解决宽高比例失衡的问题。

3. 示例说明

以下是示例说明，展示如何将以上方法应用到 vue+elementUI(el-upload) 上传组件中，并进行图片压缩。

<template>
  <el-upload
    class="upload-demo"
    ref="upload"
    action="/upload"
    :before-upload="beforeUpload"
    :on-change="handleChange"
    :limit="limit"
    :file-list="fileList">
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
</template>

<script>
import ImageCompressor from 'js-image-compressor'

export default {
  data() {
    return {
      fileList: [],
      limit: 6,
    }
  },
  methods: {
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt500k = file.size / 1024 < 500;
      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG/PNG 格式!');
      }
      if (!isLt500k) {
        this.$message.error('上传图片大小不能超过 500KB!');
      }
      return isJPG && isLt500k;
    },
    handleChange(file, fileList) {
      const imageCompressor = new ImageCompressor()

      imageCompressor.compress(file, {
        maxSizeMB: 1,
        maxWidthOrHeight: 1920
      }).then((result) => {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        const img = new Image();

        img.src = URL.createObjectURL(result);

        img.onload = function () {
          // 绘制图片到 canvas 中
          ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, 100, 100);

          // 将 canvas 转化为 base64 格式的图片
          const compressImgData = canvas.toDataURL('image/jpeg', 0.8);

          // 上传压缩后的图片
          const formData = new FormData();
          formData.append('file', convertBase64UrlToBlob(compressImgData), file.name);

          axios.post('/api/upload', formData).then((res) => {
            this.fileList.push({
              name: file.name,
              url: res.data.url
            })

            // 上传成功后的操作
          });
        };
      }).catch((err) => {
        console.log(err)
      })
    },
  },
}
</script>

我们使用 el-upload 组件作为文件上传的主体，以 beforeUpload 方法来过滤符合条件的图片，随后在 handleChange 方法中，使用 js-image-compressor 库对图片进行压缩处理，并利用 canvas 对图片进行重新绘制，解决宽高比例失衡的问题。最终将处理后的压缩图片通过 axios.post 方法传送给服务器，实现图片上传限制的操作。

以上是针对 vue+elementUI(el-upload) 图片压缩的攻略。