VueJS上传RAR文件时控制台无输出，文件对象为空问题

可能原因及对应解决方案 #

1. 浏览器对RAR文件MIME类型识别异常 #

部分浏览器无法自动识别RAR文件的MIME类型，可能导致input的change事件未触发或文件对象未正确挂载。可以手动指定accept属性，明确支持RAR格式：

<!-- 修改input的accept属性，指定RAR的后缀和MIME类型 -->
<input hidden type="file" accept=".rar,application/x-rar-compressed" class="" @change="changeFiles1" ref="report_file_1"/>

2. 重复选择同一RAR文件未触发change事件 #

若之前已选择过同一个RAR文件，再次选择时因文件路径未变化，change事件不会触发。可在点击按钮时重置input的value：

<button type='button' class="btn btn-custom btn-green btn-small" @click="handleFileClick" :disabled="document_type_1 == ''">+ Add Files</button>

// 新增点击处理方法
handleFileClick() {
  const fileInput = this.$refs.report_file_1;
  fileInput.value = ''; // 重置value，确保重复选同一文件也能触发change
  fileInput.click();
},
changeFiles1(){
  console.log(this.$refs.report_file_1.files);
}

3. 排查外部代码干扰 #

检查全局是否有文件上传钩子、表单验证逻辑对RAR文件做了拦截。可以临时移除无关代码，仅保留基础上传逻辑测试，确认是否是外部代码导致的问题。

4. 测试多浏览器兼容性 #

不同浏览器对文件类型的处理存在差异，分别在Chrome、Firefox、Edge等主流浏览器测试，确认是否为特定浏览器的兼容问题，再针对性处理。

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