使用dataType为File的Input限制所选文件大小

核心方案：直接用File对象的原生size属性判断 #

别再纠结Base64的长度了，File对象本身就带size属性，这个值是文件在磁盘上的原始字节大小，和任何编码转换无关，完全精准，直接用它做限制就不会有体积膨胀的问题。

具体实现示例 #

不管是原生JS还是主流前端框架，逻辑都一样：

原生JavaScript写法 #

const imageInput = document.getElementById('image-picker');

imageInput.addEventListener('change', (e) => {
  const selectedFile = e.target.files[0];
  if (!selectedFile) return;

  // 设定最大允许大小，比如5MB（1MB = 1024*1024字节）
  const maxAllowedSize = 5 * 1024 * 1024;

  if (selectedFile.size > maxAllowedSize) {
    alert('图片不能超过5MB，请重新选');
    imageInput.value = ''; // 清空已选文件
    return;
  }

  // 这里继续处理文件（转Base64、上传等操作）
});

Vue 3写法 #

<template>
  <input type="file" accept="image/*" @change="handleImageSelect" />
</template>

<script setup>
const handleImageSelect = (e) => {
  const file = e.target.files[0];
  if (!file) return;

  const maxSize = 5 * 1024 * 1024; // 5MB
  if (file.size > maxSize) {
    alert('图片大小超标，最多5MB');
    e.target.value = '';
    return;
  }

  // 后续业务逻辑
};
</script>

为什么之前的方法踩坑？ #

Base64编码会把3个二进制字节转成4个ASCII字符，体积会凭空涨约33%——比如1MB的图片转成Base64后会变成1.33MB左右。如果用转换后的字符串长度判断，要么会误杀符合要求的文件，要么就得把阈值算得更复杂，完全没必要。

额外小提示 #

• 给Input加accept="image/*"属性，先过滤非图片文件，减少无效判断
• 如果需要对符合大小的图片进一步压缩，用Canvas API处理后再看Blob大小，但核心的大小限制还是得靠原始File的size属性

内容的提问来源于stack exchange，提问作者Chase Watson