el-upload组件实现多张图片格式和大小验证的详细教程

创作时间:

作者:

@小白创作中心

el-upload组件实现多张图片格式和大小验证的详细教程

引用

CSDN

https://blog.csdn.net/babalamoxian/article/details/137822936

本文将详细介绍如何使用el-upload组件实现多张图片的验证功能，包括图片格式和大小的验证。文章内容较为详细，包含了需求说明、原理说明、HTML结构、JS结构以及函数解释等部分，并附有代码示例和效果截图。

需求

这是一个普通的图片上传框，最多可以上传8张图片。具体验证要求如下：

必填
不能超过5M（代码中定义变量写成isLt1000KB了，大家忽略）
格式必须是图片格式
验证错误提示‘第几张图片XX错误’

原理说明

对于一张图片的验证，基本原理如下：

const isLt1000KB = v.size / 1024 < 5000; //5M
const isPic =
  /.*\.(bmp|jpg|png|tif|gif|pcx|tga|exif|fpx|svg|psd|cdr|pcd|dxf|ufo|eps|ai|raw|WMF|webp|jpeg)/i.test(
    v.name
  );

对于多张图片的验证，定义了一个Map来记录八张图片的情况。这样可以根据需要显示某张图片的验证结果。

const img2_err_msg = ref(
  new Map([
    [0, { isPic: true, isLt1000KB: true, file: null }],
    [1, { isPic: true, isLt1000KB: true, file: null }],
    [2, { isPic: true, isLt1000KB: true, file: null }],
    [3, { isPic: true, isLt1000KB: true, file: null }],
    [4, { isPic: true, isLt1000KB: true, file: null }],
    [5, { isPic: true, isLt1000KB: true, file: null }],
    [6, { isPic: true, isLt1000KB: true, file: null }],
    [7, { isPic: true, isLt1000KB: true, file: null }],
  ])
);

HTML结构

<el-form
  ref="refShopForm01"
  :model="shopInfo"
  :rules="rules"
  ...
>
  ...
  <el-form-item class="m-32" label="室内图(最多8张)" prop="img2">
    <el-upload
      v-model:file-list="shopInfo.img2"
      action="#"
      list-type="picture-card"
      :auto-upload="false"
      :on-preview="handlePictureCardPreview"
      :limit="8"
      :on-remove="handleRemove2"
    >
      <el-icon><Plus /></el-icon>
    </el-upload>
  </el-form-item>
  ...
</el-form>

JS结构

const refShopForm01 = ref<FormInstance>();
//记录多张图片的不符合要求的问题
const img2_err_msg = ref(
  new Map([
    [0, { isPic: true, isLt1000KB: true, file: null }],
    [1, { isPic: true, isLt1000KB: true, file: null }],
    [2, { isPic: true, isLt1000KB: true, file: null }],
    [3, { isPic: true, isLt1000KB: true, file: null }],
    [4, { isPic: true, isLt1000KB: true, file: null }],
    [5, { isPic: true, isLt1000KB: true, file: null }],
    [6, { isPic: true, isLt1000KB: true, file: null }],
    [7, { isPic: true, isLt1000KB: true, file: null }],
  ])
);
const shopInfo = reactive({
  //室内图--最多8张
  img2: [] as UploadUserFile[],
});
// 验证规则
const rules = reactive<FormRules>({
  img2: [
    {
      required: true,
      message: "请选择图片",
      trigger: "blur",
    },
    { validator: validatePic2, trigger: "blur" },
  ],
});
// 验证多张图片
function validatePic2(rule: any, value: UploadUserFile[], callback: any) {
  let n = value.length;
  if (n == 0) {
    callback(new Error("请选择图片"));
  } else {
    _very(value[n - 1], n - 1);
  }
  function _very(v: UploadUserFile, i: number) {
    const isLt1000KB = v.size / 1024 < 5000; //5M
    const isPic =
      /.*\.(bmp|jpg|png|tif|gif|pcx|tga|exif|fpx|svg|psd|cdr|pcd|dxf|ufo|eps|ai|raw|WMF|webp|jpeg)/i.test(
        v.name
      );
    img2_err_msg.value.set(i, { isPic, isLt1000KB, file: v });
    if (!isPic) {
      callback(new Error(`第${i + 1}张-格式不支持`));
    }
    if (!isLt1000KB) {
      callback(new Error(`第${i + 1}张-图片超过5M`));
    }
    if (isPic && isLt1000KB) {
      let _msg = "";
      img2_err_msg.value.forEach((item, index) => {
        if (!item.isPic) {
          _msg = `第${index + 1}张-格式不支持`;
          return;
        }
        if (!item.isLt1000KB) {
          _msg = `第${index + 1}张-图片超过5M`;
          return;
        }
      });
      if (_msg.length > 0) {
        callback(_msg);
      } else {
        callback();
      }
    }
  }
}
async function handleRemove2(
  uploadFile: UploadFile,
  uploadFiles: UploadUserFile[]
) {
  let index = 7;
  img2_err_msg.value.forEach((item, ii) => {
    if (item.file == uploadFile) {
      index = ii;
    }
  });
  for (let ii = index; ii < 7; ii++) {
    let _old = img2_err_msg.value.get(ii + 1);
    img2_err_msg.value.set(ii, _old);
  }
  img2_err_msg.value.set(7, { isPic: true, isLt1000KB: true, file: null });
  await refShopForm01.value?.validateField("img2");
}