element前端实现压缩图片的功能

实现前端压缩图片的功能，可以提高网站的加载速度和用户体验，同时减少网络传输的流量和存储的空间。Element提供了el-upload组件，它支持通过设置before-upload钩子函数对上传的图片进行压缩。

以下是实现压缩图片的步骤：

步骤一：封装上传组件

在vue组件中，引入el-upload组件，并设置相关属性和方法。

<el-upload
  class="avatar-uploader"
  action=""
  :show-file-list="false"
  :before-upload="beforeUpload">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

其中，action属性指定上传的后台接口地址，show-file-list属性用于控制上传完成后是否显示文件列表，before-upload方法是在上传前执行的函数，它会接收文件对象file作为参数，并返回一个Promise对象，用于异步处理图片压缩。

步骤二：使用canvas进行压缩

在before-upload方法中，使用canvas对图片进行压缩，将压缩后的图片转成blob对象返回，以供后续上传使用。以下代码为一个示例，它将上传的图片限制在200KB以内，并压缩图片质量至0.7。

beforeUpload(file) {
  const isJpg = file.type === 'image/jpeg';
  if (!isJpg) {
    this.$message.error('只支持jpg格式的图片');
    return false;
  }
  const reader = new FileReader();
  reader.readAsDataURL(file);
  return new Promise((resolve, reject) => {
    reader.onload = e => {
      const image = new Image();
      image.src = e.target.result;
      image.onload = () => {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = image.width;
        canvas.height = image.height;
        ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
        canvas.toBlob(blob => {
          if (blob.size / 1024 > 200) {
            canvas.toBlob(blob => {
              resolve(blob);
            }, 'image/jpeg', 0.7);
          } else {
            resolve(blob);
          }
        }, 'image/jpeg', 0.7);
      };
      image.onerror = error => {
        reject(error);
      };
    };
  });
},

在上述代码中，先判断上传的图片格式是否是jpg，如果不是则提示用户。接着读取图片文件并将数据转成base64格式，再使用Image对象创建图片对象，并设置canvas的宽高和上下文。使用drawImage方法将图片画在canvas上，并使用toBlob方法将canvas转成blob对象。

在转换成blob对象之前，判断一下图片大小是否超出200KB，如果超出则重新进行压缩。toBlob方法的第三个参数指定压缩的质量参数，0.7表示压缩至70%的质量。

步骤三：上传图片

在前两步完成之后，就可以将压缩后的图片上传到服务器了。在el-upload组件的success事件中，获取返回的图片链接，更新图片显示。

<el-upload
  class="avatar-uploader"
  action=""
  :show-file-list="false"
  :before-upload="beforeUpload"
  @success="handleSuccess">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

handleSuccess(response) {
  this.imageUrl = response.data.url;
},

以上就是使用Element前端实现压缩图片的功能的完整攻略。示例代码中的图片压缩参数和大小限制可以根据实际需求进行调整。