点击上传

<input type="file" @input="事件函数" @change="事件函数" />

input 和 change 都能够通过 e.target.files 拿到 FileList。

但是建议 change，因为 input 一般为表单相关。

如果需要选择多个文件，则使用 multiple

如果要选择目录，则使用 webkitdirectory 和 directory。两个一起用，兼容性考虑

效果：

示例代码

<input
  ref="fileInput"
  style="display: none"
  type="file"
  @change="onFileChange"
/>
<button @click="openFileSelection">点击上传</button>

const openFileSelection = () => {
  if (!fileInput.value) {
    // 防止 还没有准备好
    nextTick(openFileSelection);
    return;
  }

  fileInput.value.value = "";
  fileInput.value.click();
};

const onFileChange = (e) => {
  const files = e.target.files || e.dataTransfer.files;

  console.log("FileList:", files);
};

files 是 FileList

FileList

遍历 FileList 的示例代码

for (let i = 0; i < files.length; i++) {
  // 取得一个文件
  file = files.item(i);
  // 这样也行
  file = files[i];
  // 取得文件名
  console.log(file.name);
}

// 这里的 file 就是上传用的对象

其中 .item() 返回时 File 对象