Angular文件上传如何实现10MB大小校验，禁止添加超出上限的附件？

你现有代码仅判断单个文件是否大于1MB就终止循环，未统计所有已选文件的总大小，也没有达到10MB总大小阈值后阻止添加的逻辑，可按以下代码修改：

// 定义总大小阈值：10MB 对应的标准字节数
readonly MAX_TOTAL_SIZE = 10 * 1024 * 1024;

onFileChangeInfo(event: any){
  // 计算已选中的附件总大小
  const currentTotalSize = this.myFilesInfo.reduce((sum, file) => sum + file.size, 0);
  // 统计本次循环累计添加的文件大小
  let addedSize = 0;

  for (let i = 0; i < event.target.files.length; i++) { 
    const targetFile = event.target.files[i];
    const fileName = targetFile.name;
    const fileSize = targetFile.size;

    // 预判断：已选总大小 + 本次已加大小 + 当前文件大小 是否超出阈值
    if (currentTotalSize + addedSize + fileSize > this.MAX_TOTAL_SIZE) {
      // 此处可自行添加超出大小的提示逻辑，比如调用全局提示组件
      break;
    }
    addedSize += fileSize;
    this.myFilesInfo.push({ name: fileName, size: fileSize });
  }

  // 可选：清空文件选择框的值，解决同一个文件重复选择不触发change事件的问题
  event.target.value = '';
}

核心逻辑说明 #

• 提前统计已添加附件的总大小，每次新增文件前做预校验，超出阈值直接终止循环，不会加入超出限制的文件
• 使用10 * 1024 * 1024计算10MB对应的字节数，比近似值10000000更符合存储单位的标准换算规则
• 如果需要额外增加单文件大小限制，可在总大小判断前新增单文件阈值校验即可
• 多文件选择场景下，若本次选中的多个文件累计未超出阈值，会全部添加成功，若累计超出则仅添加未超出阈值的部分

内容的提问来源于stack exchange，提问作者Roberto Rodrigues