Vue3优雅实现选择文件与文件夹上传功能

前言：原生文件上传按钮带来的困扰

许多前端工程师都曾面临这样的场景——产品经理递来一份设计稿，上面是一个精致到发光的按钮：圆角、渐变、悬停动画，样样齐全。你信心满满地打开浏览器，看到那个灰头土脸的 ……心里忍不住嘀咕：这玩意儿到底怎样才能变好看？

别担心，这个问题有办法解决！

今天就以 Vue 3 为例来攻克这个老大难问题。而且不只是选择单个文件，连一键选取文件夹这种操作也能轻松实现——没错，就是那种在网盘里常见的“上传整个文件夹”功能，前端自己就能完成。

核心思路：偷梁换柱法

说白了就一招：把原生 input 隐藏起来，用自定义按钮去“骗”它执行操作。

就好比家里装了声控灯，你一拍手它就亮，但背后其实藏着个物理开关。我们就是那个拍手的人，而 .click() 就是我们的掌声。

 复制代码
<button @click="triggerUpload('file')"> 选择 PPT/PDF 文件button>
<button @click="triggerUpload('folder')"> 选择文件夹button>

<input ref="fileInputRef" type="file" accept=".ppt,.pptx,.pdf" style="display: none" />
<input ref="folderInputRef" type="file" webkitdirectory style="display: none" />

 复制代码const triggerUpload = (type) => {
  if (type === 'file') fileInputRef.value.click();  // 看，这不就点上了嘛！
  else if (type === 'folder') folderInputRef.value.click();
};

黑科技：webkitdirectory 是什么神仙属性？

这是本次的重点！加上这个属性后，用户选中的不再是单个文件，而是整个文件夹。

它的返回值非常神奇——event.target.files 会把文件夹里所有子孙文件都平铺成一个数组，不管你目录嵌套了多少层。

划重点：每个文件对象上都有一个 webkitRelativePath 属性，它能告诉你这个文件在本地文件夹里的完整相对路径。

举个例子：你选了 我的项目 文件夹，里面有 图片/logo.png，那么 webkitRelativePath 就是 我的项目/图片/logo.png。

后端拿到这个路径，就能在服务器上原封不动地重建目录结构——是不是很酷？

血泪教训：解决 @change 不触发的千古难题

有没有遇到过这种尴尬：

1. 第一次选了 报告.pptx，正常触发上传；
2. 上传失败了，或者你取消后想重新选一次；
3. 再次点击同一个 报告.pptx；
4. @change 居然不执行了！

原因很简单：浏览器的“鸡贼”逻辑——它发现 input 的 value 没变化（还是同一个文件路径），就认为你没选新文件，所以不触发 change 事件。

解决办法：每次处理完文件后，手动清空 value！

 复制代码const onFileSelected = (event) => {
  const files = Array.from(event.target.files);
  // ... 处理文件逻辑 ...
  
  //