FileReader 文件读取与上传至后端 - Excel & PDF 示例

原创于 2025-07-03 08:00:00 发布 · 404 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#excel #pdf #前端 #vue.js

📁 FileReader 文件读取与上传至后端 - Excel & PDF 示例

📌 整理不易，收藏、点赞、关注！让你轻松读懂文件上传的完整流程！

🎯 一、教程概览

我们将通过以下几个步骤：

读取 Excel 文件：利用 FileReader 读取 Excel 文件内容，并将其显示。
读取 PDF 文件：利用 FileReader 读取 PDF 文件内容，并将其进行展示（如获取 PDF 页数等）。
上传文件至后端：将选择的文件上传至后端 API，以便保存或进一步处理。

📦 二、使用 `FileReader` 读取文件

1. 创建文件选择器并监听文件选择

<input type="file" id="uploadFile" />

const fileInput = document.getElementById('uploadFile')
fileInput.addEventListener('change', handleFileSelect)

function handleFileSelect(event) {
  const file = event.target.files[0]
  if (!file) return
  const reader = new FileReader()

  if (file.type === 'application/pdf') {
    // 如果是 PDF 文件
    reader.readAsArrayBuffer(file)
  } else if (file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
    // 如果是 Excel 文件
    reader.readAsArrayBuffer(file)
  }
}

🎯 三、读取 Excel 文件

2. 读取 Excel 文件内容

Excel 文件的读取需要借助第三方库 xlsx，你可以通过 npm 安装它：

npm install xlsx

然后，你可以使用 FileReader 将 Excel 文件读取为 ArrayBuffer，并使用 xlsx 库解析内容：

import * as XLSX from 'xlsx'

function handleFileSelect(event) {
  const file = event.target.files[0]
  if (!file) return
  const reader = new FileReader()

  reader.onload = function () {
    // 读取成功后，处理文件
    const arrayBuffer = reader.result
    const workbook = XLSX.read(arrayBuffer, { type: 'array' })

    // 获取第一个工作表的内容
    const sheetName = workbook.SheetNames[0]
    const sheet = workbook.Sheets[sheetName]
    
    // 转换为 JSON 格式
    const json = XLSX.utils.sheet_to_json(sheet)
    console.log(json) // 打印 Excel 文件内容
  }

  reader.readAsArrayBuffer(file)
}

3. 显示读取结果

在控制台中，你将看到一个包含 Excel 文件内容的数组，你可以根据自己的需求将其渲染到页面上。

🎯 四、读取 PDF 文件

4. 读取 PDF 文件内容

PDF 文件的读取稍微复杂一些，使用 pdf.js 来处理。你可以通过 npm 安装 pdf.js：

npm install pdfjs-dist

然后，使用 FileReader 将 PDF 文件读取为 ArrayBuffer，并使用 pdf.js 解析文件：

import * as pdfjsLib from 'pdfjs-dist'

function handleFileSelect(event) {
  const file = event.target.files[0]
  if (!file) return
  const reader = new FileReader()

  reader.onload = function () {
    const arrayBuffer = reader.result
    pdfjsLib.getDocument(arrayBuffer).promise.then((pdf) => {
      console.log('PDF 加载成功！')

      // 获取第一页内容
      pdf.getPage(1).then((page) => {
        console.log('第一页：', page)
      })
    })
  }

  reader.readAsArrayBuffer(file)
}

这样，你就能够读取并解析 PDF 文件的内容，进而在页面上展示相关信息（如页数、文本等）。

🎯 五、将文件上传到后端

接下来，我们将文件内容上传至后端。我们可以通过 FormData 将文件作为 multipart/form-data 上传。假设后端接口为 POST /upload。

5. 创建上传文件的功能

function handleFileSelect(event) {
  const file = event.target.files[0]
  if (!file) return
  const reader = new FileReader()

  reader.onload = function () {
    const arrayBuffer = reader.result

    // 发送文件至后端
    const formData = new FormData()
    formData.append('file', file)

    // 使用 Fetch API 进行文件上传
    fetch('/upload', {
      method: 'POST',
      body: formData,
    })
      .then((response) => response.json())
      .then((data) => {
        console.log('文件上传成功', data)
      })
      .catch((error) => {
        console.error('上传失败', error)
      })
  }

  reader.readAsArrayBuffer(file)
}

6. 后端代码（假设使用 Node.js 和 Express）

这是一个简单的 Node.js 后端示例，使用 multer 中间件来处理文件上传：

npm install express multer

const express = require('express')
const multer = require('multer')
const upload = multer({ dest: 'uploads/' })

const app = express()

app.post('/upload', upload.single('file'), (req, res) => {
  console.log('接收到文件:', req.file)
  res.json({ message: '文件上传成功！' })
})

app.listen(3000, () => {
  console.log('Server is running on port 3000')
})