上传文件修改按钮文本后document.getElementById取元素为null报错如何解决

你直接修改label的innerText属性时，会清空label内部所有子元素，包括id为fileName的<input>文件选择器和<i>图标，所以后续调用document.getElementById('fileName')只能拿到null，读取files属性自然抛出类型错误。

优先推荐用Vue响应式能力实现，避免直接操作DOM：

方案1：使用响应式变量控制按钮文本（最优） #

1. 先在组件的data中定义存储文件名的响应式变量：

data() {
  return {
    // 其他原有变量
    uploadBtnText: 'Upload Project File',
    projectFile: null
  }
}

2. 修改模板的label部分，把固定文本替换为响应式变量：

<label>
  <input 
    type="file"
    name="projectFile"
    id="fileName"
    accept=".xls, .xlsx, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" 
    v-on:change="validateFileType(); hashContentMD5(); fileName; getPresignedURL()"
  />
  <i class="fas fa-cloud-upload"></i> 
  {{ uploadBtnText }}
</label>

3. 把fileName方法中原有的DOM操作代码替换为修改响应式变量：

// 移除原有的document.querySelector相关代码，替换为下行
this.uploadBtnText = filename;

该方案完全符合Vue开发规范，不会出现DOM被意外覆盖的问题。

方案2：仅修改文本节点（必须操作DOM时使用） #

如果确实需要直接操作DOM，不要覆盖整个innerText，仅定位修改label内的文本节点即可：

const label = document.querySelector('label') as HTMLLabelElement;
// 遍历子节点，只修改文本节点内容
for (let node of label.childNodes) {
  if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim() === 'Upload Project File') {
    node.textContent = filename;
    break;
  }
}

• Vue项目不推荐使用querySelector、getElementById等原生DOM操作，优先用框架的响应式能力、模板绑定实现逻辑
• 获取选中的文件无需读取DOM，可直接从change事件参数中获取：

// 模板中给change事件传$event参数
v-on:change="validateFileType($event); hashContentMD5(); fileName; getPresignedURL()"

// 对应方法中直接取文件
function validateFileType(event: Event) {
  const target = event.target as HTMLInputElement;
  const file = target.files?.[0];
  // 后续逻辑直接使用该file变量即可
}

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