手动实现文件上传

由于ElementPlus的文件上传组件不满足需求，因此自己实现文件上传功能。

前置知识

input元素

当给input元素的type属性设置为file时，就可以选择文件了。

当给input元素添加事件的时候，事件对象event上面的e.target.files就是文件列表

File对象

本质：File对象继承自Blob对象，它本身就代表了文件的二进制数据。

File对象属性

name: 文件名

size：文件大小

type：MIME类型

lastModified：最后修改时间戳

webkitRelativePath： 相对路径（在支持文件夹上传的浏览器中有效）

File对象本身没有直接的属性代表文件流，但File对象本身就是一个可读的流数据源。

要想获取文件流，可以使用以下方法

File Reader等读取文件流。

具体实现方式

<script lang="ts" setup>
  import { ref } = ref<File>()
  
  const handleImport = () => {
    const uploadEl = document.createElement('input')
    uploadEl.type = file
    uploadEl.accept = '.xsl, .xslx'
    uploadEl.addEventListener('change', (e) => {
      // target是input DOM元素
      const target = e.target as HTMLInputElement
      const [file] = target.files || []
      if (file) {
        fileObj.value = file
      }
    })
    // 创建的input元素，需要手动触发点击click事件
    uploadEl.click()
  }
</script>

<template>
    <el-button @click="handleImport>
       导入文件
   </el-button>
</template>

上面代码成功拿到了上传的文件对象fileObj。

如果后续要把fileObj对象传给后端接口，还需要将其类型转换为formData格式。