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

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

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


🎯 一、教程概览

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

  1. 读取 Excel 文件 :利用 FileReader 读取 Excel 文件内容,并将其显示。
  2. 读取 PDF 文件 :利用 FileReader 读取 PDF 文件内容,并将其进行展示(如获取 PDF 页数等)。
  3. 上传文件至后端:将选择的文件上传至后端 API,以便保存或进一步处理。

📦 二、使用 FileReader 读取文件

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

html 复制代码
<input type="file" id="uploadFile" />
js 复制代码
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 安装它:

bash 复制代码
npm install xlsx

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

js 复制代码
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

bash 复制代码
npm install pdfjs-dist

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

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. 创建上传文件的功能

js 复制代码
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 中间件来处理文件上传:

bash 复制代码
npm install express multer
js 复制代码
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')
})

这样,文件就可以通过 FormData 发送到后端,并通过 multer 处理上传。


🧠 六、总结与优化

总结

  • 使用 FileReader 可以方便地读取文件内容,支持多种文件格式(如 Excel、PDF)。
  • 对于 Excel 文件,使用 xlsx 库解析内容,转换为 JSON 格式,方便在前端展示。
  • 对于 PDF 文件,使用 pdf.js 库解析内容,获取页数、文本等信息。
  • 文件上传可以通过 FormData 将文件数据以 multipart/form-data 格式发送到后端。

优化建议

  1. 文件大小限制:在读取文件时可以进行文件大小的检查,避免加载过大的文件。
  2. 用户反馈:上传过程中可以显示进度条,或者在前端页面展示上传状态,提升用户体验。
  3. 文件类型校验:对于文件类型进行校验,确保用户上传的文件符合要求。
相关推荐
万少1 分钟前
2-自然壁纸实战教程-AGC 新建项目
前端·harmonyos
满分观察网友z12 分钟前
别小看这个滑动条!从性能灾难到用户挚爱的 uni-app Slider 踩坑实录
前端
编程猪猪侠14 分钟前
Taro+Vue3实现微信小程序富文本编辑器组件开发指南
vue.js·微信小程序·taro
满分观察网友z15 分钟前
别再裸写<textarea>了!一个“小”功能,我用上了它几乎所有API
前端
西西木科技丨Shopify开发机构21 分钟前
如何在 Shopify 中建立重定向
前端·html
汪子熙27 分钟前
深入探析 header facets:定位与应用
前端·javascript
你听得到1128 分钟前
从需求到封装:手把手带你打造一个高复用、可定制的Flutter日期选择器
前端·flutter
江城开朗的豌豆33 分钟前
Vue Router vs location.href:导航跳转的正确姿势,你选对了吗?
前端·javascript·vue.js
小磊哥er37 分钟前
【前端工程化】如何制定前端项目中的页面模版?
前端
Liudef0640 分钟前
基于HTML与Java的简易在线会议系统实现
java·前端·html