巧用Element UI图片上传功能，让图片大小不再受限

2023-11-15 23:16:18

前言

在日常开发中，我们经常会遇到需要上传图片的场景。Element UI作为一款优秀的UI框架，提供了功能强大的图片上传组件。但是，Element UI默认情况下并没有对图片的宽高进行校验，这可能会导致上传的图片大小不符合要求。本文将介绍如何使用Element UI图片上传组件，对上传图片的宽高进行校验，并提供了图片压缩的解决方案，帮助开发者轻松应对各种图片上传需求。

Element UI图片上传组件

Element UI的图片上传组件非常容易使用，只需要在页面中引入以下代码即可：

<el-upload
  action="your_upload_url"
  :show-file-list="false"
  :on-success="handleSuccess"
  :on-error="handleError"
>
  <el-button slot="trigger" icon="el-icon-upload">选择图片</el-button>
</el-upload>

其中，action属性指定了图片上传的地址，show-file-list属性控制是否显示上传的文件列表，on-success和on-error属性分别指定了上传成功和失败时的回调函数。

对图片宽高进行校验

在使用Element UI图片上传组件时，我们可以通过设置accept属性来对上传图片的类型进行限制。例如，要只允许上传PNG和JPEG格式的图片，可以将accept属性设置为"image/png,image/jpeg"。

<el-upload
  action="your_upload_url"
  :show-file-list="false"
  :accept="accept"
  :on-success="handleSuccess"
  :on-error="handleError"
>
  <el-button slot="trigger" icon="el-icon-upload">选择图片</el-button>
</el-upload>

但是，仅仅限制上传图片的类型并不能保证图片的宽高符合要求。为了对图片的宽高进行校验，我们需要在on-success回调函数中对上传的图片进行检查。我们可以使用HTML5的FileReader对象来读取图片的二进制数据，然后使用Image对象来获取图片的宽高。

function handleSuccess(response, file, fileList) {
  // 读取图片的二进制数据
  const reader = new FileReader();
  reader.onload = function () {
    // 创建一个Image对象
    const image = new Image();
    image.onload = function () {
      // 获取图片的宽高
      const width = image.width;
      const height = image.height;

      // 检查图片的宽高是否符合要求
      if (width < 300 || height < 300) {
        // 图片太小，不符合要求
        alert("图片太小，请重新上传！");
        return;
      }

      // 图片符合要求，可以进行下一步操作
      ...
    };

    // 将二进制数据转换成DataURL
    image.src = reader.result;
  };
  reader.readAsDataURL(file);
}

图片压缩

在某些情况下，我们可能需要对上传的图片进行压缩，以减小图片的大小。Element UI并没有提供图片压缩的功能，但是我们可以使用第三方库来实现图片压缩。目前比较流行的图片压缩库有以下几个：

tinypng
imagemin
jpegtran
optipng

我们可以通过使用这些库来对上传的图片进行压缩。例如，使用tinypng库来压缩图片的代码如下：

const tinypng = require("tinypng");
const fs = require("fs");

// 创建一个tinypng客户端
const client = tinypng.createClient("your_tinypng_api_key");

// 读取图片的二进制数据
const imageData = fs.readFileSync("image.png");

// 压缩图片
client.shrink(imageData).then((result) => {
  // 将压缩后的图片保存到本地
  fs.writeFileSync("compressed_image.png", result);
});