纯前端上传文件并解析数据

📋 功能介绍

• 点击上传按钮，打开电脑文件夹，轻松选择您想要上传的文件。
• 解析文件，提取出您需要的数据，便于后续处理。

📽️ 演示：Treasure-Navigation

💡 思路

1. 使用 <input type="file"/> 元素，可以方便地获取文件。
2. 监听input的change事件，把input元素隐藏起来
3. 点击上传按钮时，去触发input的点击事件
4. 通过触发 input 的 change 事件，解析获取到的文件信息

代码实现

<div class="footer__btn" @click="clickFileDom">
	<input type="file" name="上传" id="myInput" style="display: none" />
	<span class="name">上传</span>
</div>

// clickFileDom：点击按钮时触发的函数
function clickFileDom() {
  const fileDom = document.querySelector('#shortCutUploadInput');
  if (fileDom) {
    fileDom.click(); // 触发文件选择
  } else {
    console.warn('元素不存在');
  }
}

document.querySelector('#myInput')?.addEventListener('change', uploadHtmlFile);
// uploadHtmlFile：绑定在input的click执行函数
function uploadHtmlFile( event) {
  if (this.files) {
    // 获取到的文件是blob的格式，需要FileReader转换成字符串
    const fileReader = new FileReader();
    // blob转换成字符串
    fileReader.readAsText(this.files[0]);
    // 监听onload事件， blob转换成字符串后，会自动执行
    fileReader.onload = function (res) {
      // 处理解析后的数据
      console.log(res.target?.result); // 可以在这里处理数据
    };
  }
}

📝 总结

通过本示例，您可以轻松实现前端文件上传及解析数据的功能，提升用户体验，同时避免后端交互。希望这篇文章对您有所帮助！