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. 文件类型校验:对于文件类型进行校验,确保用户上传的文件符合要求。
相关推荐
bing_1584 小时前
Excel 如何进行多条件查找或求和?
excel
秀儿还能再秀4 小时前
基于Excel的数据分析思维与分析方法
数据分析·excel
bing_1584 小时前
Excel 如何处理更复杂的嵌套逻辑判断?
excel
weixin_472339464 小时前
高效处理大体积Excel文件的Java技术方案解析
java·开发语言·excel
灵犀学长4 小时前
EasyExcel之SheetWriteHandler:解锁Excel写入的高阶玩法
spring boot·excel
zwjapple5 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
Eiceblue6 小时前
【免费.NET方案】CSV到PDF与DataTable的快速转换
开发语言·pdf·c#·.net
像风一样自由20207 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem8 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊8 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php