vue怎么实现导入excel表功能

javascript 复制代码

            <el-upload
              ref="upload"
              :action="aaa"
              :on-change="importProject"
              name="excelFile"
              multiple
              :auto-upload="false"
              :show-file-list="false"
            >
              <el-button type="warning">导入</el-button>
            </el-upload>

action 属性应是一个上传地址 URL 字符串

action如果不用的话可以随便传一个参数，但是不能省略

multiple：能同时上传多个表格

auto-upload="false"：表示选择文件后不自动上传，而是通过按钮点击触发上传。

:show-file-list="false"：不展示导入的文件名称

javascript 复制代码

    importProject(file) {
          const fd = new FormData()
          fd.append('file', file.raw)
          this.excelToJSONs(fd)//把文件传给后端
          // console.log('文件', file)
          // console.log('fd', fd)
    }

javascript 复制代码

 getMessage() {
     this.$refs.upload.clearFiles()
 },

this.$refs.upload.clearFiles()：清空上传组件中的文件显示，把这句话加在想清空文件显示的函数里

可能的错误：

Required request part 'file' is not present

错误的代码：fd.append('file', file)

原因：看似正确地添加了 file 字段，但传入的是整个 file 对象（其实是 el-upload 返回的一个封装对象），而不是原生的 File 对象。

解决：改为fd.append('file', file.raw)

Current request is not a multipart request

原因：通常是因为后端期望接收一个 multipart/form-data 格式的请求（即文件上传格式），但前端发送的是其他格式（如 JSON）

解决：用FormData()

补充：

浏览器无法获取用户电脑上文件的"真实本地路径"（如 C:\xxx\xxx.xlsx），这是出于安全机制。

可以获取到的是：

文件对象 (File)：用于读取内容或上传

文件名、大小、类型等基本信息

如果需要预览，可以生成临时 URL（URL.createObjectURL(file)）

javascript 复制代码

importProject(file) {
  console.log('完整文件对象:', file)

  // 文件名
  console.log('文件名:', file.name)

  // 文件大小（字节）
  console.log('文件大小:', file.size)

  // 文件类型
  console.log('文件类型:', file.type)

  // 保存原始 File 对象，供后续处理用
  this.selectedExcelFile = file.raw
}