vue中点击按钮上传文件

<el-button
  type="primary"
  style="margin-left: 10px"
  @click="sixthBatchImport" // 点击事件触发下面input点击
>
  批量导入
</el-button>
<input
  id="sixthInput"
  type="file"
  style="display: none"
  @change="onFileChange" // 点击选取文件，之后检验、调用接口等操作
  accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" // 上传文件的类型， 媒体类型
/>


对应方法：
// 批量导入
const sixthBatchImport = () => {
  const input: HTMLInputElement | null = document.querySelector("#sixthInput");
  input?.click();
};

// 选取文件后调用接口
const onFileChange = (e: any) => {
  const file = e.target.files[0];
  // 上传文件的文件流是无法被序列化并传递的。所以我们就可以使用到formdata对象
  // 简单理解就是new FormData()包裹之后 生成的是二进制文件流
  let formData = new FormData();
  formData.append("file", file);
};