📁 FileReader 文件读取与上传至后端 - Excel & PDF 示例
📌 整理不易,收藏、点赞、关注!让你轻松读懂文件上传的完整流程!
🎯 一、教程概览
我们将通过以下几个步骤:
- 读取 Excel 文件 :利用
FileReader
读取 Excel 文件内容,并将其显示。 - 读取 PDF 文件 :利用
FileReader
读取 PDF 文件内容,并将其进行展示(如获取 PDF 页数等)。 - 上传文件至后端:将选择的文件上传至后端 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
格式发送到后端。
优化建议
- 文件大小限制:在读取文件时可以进行文件大小的检查,避免加载过大的文件。
- 用户反馈:上传过程中可以显示进度条,或者在前端页面展示上传状态,提升用户体验。
- 文件类型校验:对于文件类型进行校验,确保用户上传的文件符合要求。