Vue.js 多平台图片上传：动态尺寸与统一大小验证教程

export default {
  data() {
    return {
      isLoading: false, // 控制表单提交时的加载状态
      loadingImage: false, // 控制图片预览加载时的状态
      formData: {
        PlatformTypeID: null, // 当前选中的平台ID
        LinkToDocument: null, // 已上传图片的URL或预览DataURL
        TypeofDocument: null, // 图片文件类型（扩展名）
      },
      platformTypes: [ // 定义所有平台及其尺寸要求
        { ID: 'platform1', Name: '平台1', dimensions: { width: 920, height: 300 } },
        { ID: 'platform2', Name: '平台2', dimensions: { width: 210, height: 200 } },
        { ID: 'platform3', Name: '平台3', dimensions: { width: 790, height: 270 } },
      ],
      image: { // 存储当前选中图片的信息和错误
        file: null,
        size: 0,
        width: 0,
        height: 0,
        error: '', // 存储验证错误信息
      },
      maxImageSizeMB: 1, // 所有平台统一的图片最大大小限制（MB）
    };
  },
  computed: {
    // 根据选中的平台ID动态获取对应的尺寸规则
    selectedPlatformRules() {
      if (!this.formData.PlatformTypeID) return null;
      return this.platformTypes.find(
        (p) => p.ID === this.formData.PlatformTypeID
      )?.dimensions;
    },
    // 判断表单是否有效，用于控制提交按钮的禁用状态
    isFormValid() {
      return !this.image.error && this.formData.PlatformTypeID && this.image.file;
    }
  },
  // ... methods and template
};

<template>
  <div>
    <form @submit.prevent="submit" style="padding: 10px;">
      <!-- 平台选择下拉框 -->
      <div class="form-group">
        <label for="platformSelect">平台</label>
        <select
          id="platformSelect"
          class="form-control"
          v-model="formData.PlatformTypeID"
          @change="clearImageError"
        >
          <option
            v-for="platform in platformTypes"
            :key="platform.ID"
            :value="platform.ID"
          >
            {{ platform.Name }}
          </option>
        </select>
      </div>

      <!-- 图片选择与预览区域 -->
      <div class="form-group">
        <label for="fileInput">选择图片</label>
        <div class="row">
          <div class="col-md-4 mb-5">
            <img
              v-if="formData.LinkToDocument"
              :src="formData.LinkToDocument"
              class="img-responsive"
              height="100"
              alt="图片预览"
            />
            <img
              src="~/static/img/loading.gif"
              height="100"
              v-if="!formData.LinkToDocument && loadingImage"
              alt="加载中..."
            />
          </div>
        </div>
        <input
          type="file"
          @change="handleFileUpload"