JS设置自定义文件路径时读取files属性触发TypeError报错

你触发的报错信息如下：

vue.js:590 [Vue warn]: Error in v-on handler: "TypeError: Cannot read properties of null (reading 'files')"
(found in )

报错的直接诱因有两个：

• DOM查询目标不存在：你原有HTML中文件选择器的id是myfile，测试代码里写的document.getElementById('mynewfile')会查找id为mynewfile的页面元素，页面中根本没有这个元素，返回值为null，对null读取.files属性必然触发类型错误。
• 实现思路本身不符合浏览器安全规则：你试图通过JS直接给文件选择器指定本地文件路径的做法从根上就行不通。现代浏览器出于安全防护目的，禁止网页脚本直接操作用户本地文件系统，你之前看到的C:\\fakepath\\r.csv是浏览器故意返回的虚假路径，不是真实磁盘地址，就算你把id改对，也无法通过给input的value赋值本地路径的方式选中文件，这类操作会被浏览器直接拦截。

要求不改动原有解析源码的前提下，要实现自动加载指定CSV文件测试，只能通过模拟用户选中文件的流程实现，核心是构造原生File对象赋值给文件选择器的files属性，具体实现代码如下：

async function autoLoadTestCsv() {
  // 读取测试用r.csv文件，注意文件需放在网页可访问的静态资源路径下
  const csvResp = await fetch('./r.csv');
  const csvBlob = await csvResp.blob();
  // 构造与用户手动选中完全一致的File对象
  const testCsvFile = new File([csvBlob], 'r.csv', { type: 'text/csv' });
  // 生成FileList挂载到原文件选择器上
  const dt = new DataTransfer();
  dt.items.add(testCsvFile);
  const fileInput = document.getElementById('myfile');
  fileInput.files = dt.files;

  // 以下为你原有的解析逻辑，无需做任何修改
  const selectedFile = fileInput.files[0];
  console.log(selectedFile.name);
  this.fileName = selectedFile.name;
  Papa.parse(selectedFile, {
    skipEmptyLines: true,
    preview: readRange.numRows > 0 ? readRange.numRows : 0,
    complete: (results) => {
      console.log('Finished:', results.data);
      this.raw = results.data;
      this.limitColumns(readRange.numCols > 0 ? readRange.numCols : 0);
      this.header = Array.from(this.raw[0]); // problem: duplicated / null headers
      this.header.shift();
      this.refreshPreview();
      this.completed = true;
      console.log(this.completed);
    }
  })
}

// 执行测试加载
autoLoadTestCsv();

• 本地调试时不要直接用file://协议打开HTML文件，否则fetch读取本地CSV会触发跨域错误，建议用本地静态服务（比如Live Server、http-server）启动页面访问。
• 你之前写的const mynewfile = "r.csv"只是普通字符串变量，和DOM元素、文件对象没有任何关联，无法起到选中文件的作用。

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