当前位置：首页 > news >正文

js 中 file 文件应用

news 来源：原创 2025/5/14 18:17:40

文章目录

- 文件上传
- - File 对象基本属性
  - 文件上传
  - 大文件上传
  - 文件格式校验
  - - 通过 type 属性校验图片格式
    - 通过文件名扩展名校验
- 文件解析
- - 一、处理图片文件流（以 `Blob` 格式接收文件流为例）
  - 二、处理文本文件流
  - 三、处理 PDF 文件流（借助 PDF.js 库来展示，需先引入 PDF.js 相关脚本）
- base64 读取及转换
- - 方法一：通过`FileReader`读取本地图片文件转换为Base64
  - 方法二：获取页面上已存在图片元素并转换为Base64

文件上传

以下是关于前端 File 对象的基本属性、文件上传、大文件上传以及格式校验的相关内容及实例：

File 对象基本属性

在前端，当用户通过 <input type="file"> 元素选择文件后，可以获取到对应的 File 对象，它包含了诸多有用的属性：

name：表示文件名，包含文件的扩展名，例如 "example.jpg"。
size：以字节为单位返回文件的大小，比如一个 500KB 的文件，其 size 值大约就是 500 * 1024 字节（因为 1KB = 1024 字节）。
type：返回文件的 MIME 类型，像图片文件常见的有 "image/jpeg"（JPEG 图片）、"image/png"（PNG 图片），文本文件可能是 "text/plain" 等。
lastModified：返回文件最后修改时间的时间戳（从 1970 年 1 月 1 日 00:00:00 UTC 到文件最后修改时间的毫秒数）。

示例代码，获取文件的基本属性：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8">
</head><body><input type="file" id="fileInput"><button onclick="getFileInfo()">获取文件信息</button><script>function getFileInfo() {const fileInput = document.getElementById('fileInput');const file = fileInput.files[0];if (file) {console.log('文件名:', file.name);console.log('文件大小:', file.size, '字节');console.log('文件类型:', file.type);console.log('最后修改时间:', new Date(file.lastModified).toLocaleString());}}</script>
</body></html>

文件上传

通常是将用户选择的文件发送到后端服务器进行保存或进一步处理，基本步骤如下：

创建 FormData 对象：用于模拟表单数据，方便将文件数据和其他可能的额外数据（比如文件名、描述等额外字段）一起发送。
添加文件到 FormData：把通过 <input type="file"> 获取到的 File 对象添加进去。
发起 XMLHttpRequest 或使用 fetch API 发送请求：将包含文件的 FormData 发送到后端指定的接口。

以下是使用 fetch API 的示例，假设后端接口地址为 "/upload"：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8">
</head><body><input type="file" id="fileInput"><button onclick="uploadFile()">上传文件</button><script>async function uploadFile() {const fileInput = document.getElementById('fileInput');const file = fileInput.files[0];if (file) {const formData = new FormData();formData.append('file', file);try {const response = await fetch('/upload', {method: 'POST',body: formData});const result = await response.json();console.log(result);} catch (error) {console.error('上传出错:', error);}}}</script>
</body></html>

大文件上传

大文件上传需要考虑到避免一次性将整个大文件读入内存，防止浏览器内存溢出等问题，常见的做法是采用切片上传，步骤大致如下：

将大文件进行切片：按照一定的大小（比如每片 1MB 或者其他合适的大小）把文件切割成多个小的文件片段。
为每个切片标记顺序等信息：方便后端接收后能正确地将切片组合还原成完整文件，例如可以给每个切片添加序号字段。
依次上传切片：逐个将切片发送到后端，一般可以通过循环和记录上传进度等机制来实现。
后端处理切片并合并还原文件：后端接收到切片后，按照约定的顺序等规则将它们合并成原始的大文件。

以下是一个简单的大文件切片上传的前端示例（仅示意切片部分和简单的上传逻辑，完整功能还需结合后端完善），假设切片大小设为 1MB（1024 * 1024 字节）：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8">
</head><body><input type="file" id="bigFileInput"><button onclick="uploadBigFile()">上传大文件</button><script>function uploadBigFile() {const fileInput = document.getElementById('bigFileInput');const file = fileInput.files[0];if (file) {const chunkSize = 1024 * 1024; // 1MB 切片大小const chunks = [];let start = 0;while (start < file.size) {const end = Math.min(start + chunkSize, file.size);const chunk = file.slice(start, end);chunks.push(chunk);start = end;}// 此处可以添加代码来逐个上传切片，比如通过循环调用上传函数，并且处理进度等情况console.log('文件已切片，共', chunks.length, '个切片');}}</script>
</body></html>

文件格式校验

可以通过 File 对象的 type 属性或者文件扩展名来校验文件格式是否符合要求，以下是几种常见的校验方式示例：

通过 type 属性校验图片格式

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8">
</head><body><input type="file" id="imageFileInput"><button onclick="checkImageFormat()">校验图片格式</button><script>function checkImageFormat() {const fileInput = document.getElementById('imageFileInput');const file = fileInput.files[0];if (file) {const allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];if (allowedTypes.includes(file.type)) {console.log('图片格式符合要求');} else {console.log('图片格式不符合要求');}}}</script>
</body></html>

通过文件名扩展名校验

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8">
</head><body><input type="file" id="fileInputForExtensionCheck"><button onclick="checkFileExtension()">校验文件扩展名</button><script>function checkFileExtension() {const fileInput = document.getElementById('fileInputForExtensionCheck');const file = fileInput.files[0];if (file) {const fileName = file.name;const allowedExtensions = ['.jpg', '.png', '.txt'];const fileExtension = fileName.substring(fileName.lastIndexOf('.'));if (allowedExtensions.includes(fileExtension.toLowerCase())) {console.log('文件扩展名符合要求');} else {console.log('文件扩展名不符合要求');}}}</script>
</body></html>

上述示例展示了前端 File 对象相关操作的基础实现，实际应用中，根据具体的业务需求和后端配合情况，还需要进一步完善逻辑、处理错误以及优化用户体验等。

文件解析

以下是几种前端对后端返回的文件流进行解码显示的常见实例，分别针对不同类型的文件（图片、文本文件等）进行说明：

一、处理图片文件流（以 `Blob` 格式接收文件流为例）

当后端返回图片文件流时，前端可以将其转换为可显示的图片元素（如 <img> 标签来展示），示例代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8">
</head><body><img id="imageDisplay" src="" alt="显示图片"><script>// 模拟后端返回的文件流数据，这里先创建一个图片的 Blob 对象示例，实际中通常通过 AJAX 等方式获取后端返回数据const imageBlob = new Blob([/* 这里可以放入图片的二进制数据，示例简化省略具体数据 */], { type: 'image/jpeg' });const imageUrl = URL.createObjectURL(imageBlob);const imageElement = document.getElementById('imageDisplay');imageElement.src = imageUrl;// 注意，在合适的时候（比如页面卸载等情况），需要释放这个临时的 URL 对象，避免内存泄漏window.addEventListener('unload', function () {URL.revokeObjectURL(imageUrl);});</script>
</body></html>

在实际应用中，通常会使用 fetch 或者 XMLHttpRequest 等方式从后端获取文件流数据并转换为 Blob，以下是使用 fetch 来获取后端返回的图片文件流并显示的完整示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8">
</head><body><img id="imageDisplay" src="" alt="显示图片"><script>fetch('后端图片文件流接口地址', {method: 'GET',// 根据后端要求设置相应的请求头，比如认证相关的、指定返回格式等headers: {'Authorization': 'Bearer your_token'}}).then(response => response.blob()).then(imageBlob => {const imageUrl = URL.createObjectURL(imageBlob);const imageElement = document.getElementById('imageDisplay');imageElement.src = imageUrl;window.addEventListener('unload', function () {URL.revokeObjectURL(imageUrl);});}).catch(error => {console.error('获取图片文件流出错:', error);});</script>
</body></html>

二、处理文本文件流

对于后端返回的文本文件流，前端可以将其读取并展示在页面上（比如显示在 <textarea> 中），示例如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8">
</head><body><textarea id="textDisplay" rows="10" cols="50"></textarea><script>// 模拟通过 AJAX 获取后端返回的文本文件流数据，转换为文本并显示，// 以下先简化用一个文本 Blob 示例const textBlob = new Blob([/* 这里放入文本的二进制数据，示例简化省略 */], { type: 'text/plain' });const reader = new FileReader();reader.onload = function (e) {const textArea = document.getElementById('textDisplay');textArea.value = e.target.result;};reader.readAsText(textBlob);// 如果是通过 fetch 等真实获取后端数据，示例如下：fetch('后端文本文件流接口地址', {method: 'GET'}).then(response => response.blob()).then(textBlob => {const reader = new FileReader();reader.onload = function (e) {const textArea = document.getElementById('textDisplay');textArea.value = e.target.result;};reader.readAsText(textBlob);}).catch(error => {console.error('获取文本文件流出错:', error);});</script>
</body></html>

三、处理 PDF 文件流（借助 PDF.js 库来展示，需先引入 PDF.js 相关脚本）

如果后端返回的是 PDF 文件流，想要在前端展示，可以利用 PDF.js 库实现，以下是基本的示例代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.min.js"></script>
</head><body><canvas id="pdfCanvas"></canvas><script>// 模拟通过 AJAX 获取后端返回的 PDF 文件流数据，转换为可显示的 PDF，// 先简化示例为一个 PDF Blobconst pdfBlob = new Blob([/* 这里放入 PDF 的二进制数据，示例简化省略 */],{ type: 'application/pdf' });const url = URL.createObjectURL(pdfBlob);pdfjsLib.getDocument(url).promise.then(function (pdf) {pdf.getPage(1).then(function (page) {const canvas = document.getElementById('pdfCanvas');const context = canvas.getContext('2d');const viewport = page.getViewport({ scale: 1 });canvas.width = viewport.width;canvas.height = viewport.height;const renderContext = {canvasContext: context,viewport: viewport};page.render(renderContext);});});window.addEventListener('unload', function () {URL.revokeObjectURL(url);});</script>
</body></html>

同样，如果使用 fetch 等方式真实从后端获取 PDF 文件流，只需把上述模拟 Blob 的部分替换为实际的 fetch 请求及处理逻辑即可。

以上这些实例展示了不同类型文件流在前端解码显示的常见做法，实际应用中，需要根据具体的后端接口规范以及业务场景进行相应的调整和完善，比如处理请求错误、设置合适的请求头、考虑文件较大时的加载和显示优化等情况。

base64 读取及转换

以下是几种前端将图片转换为Base64编码的常见方法示例：

方法一：通过`FileReader`读取本地图片文件转换为Base64

这种方式适用于用户从本地选择图片后，在前端将其转换为Base64编码，方便后续展示、上传等操作。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8">
</head><body><input type="file" id="fileInput" /><img id="imageDisplay" src="" alt="显示图片" /><script>const fileInput = document.getElementById('fileInput');fileInput.addEventListener('change', function (e) {const file = e.target.files[0];if (file) {const reader = new FileReader();reader.onloadend = function () {const base64Data = reader.result;const imageElement = document.getElementById('imageDisplay');imageElement.src = base64Data;};reader.readAsDataURL(file);}});</script>
</body></html>

在上述代码中：

首先通过 document.getElementById 获取页面上的文件选择输入框元素。
给输入框添加 change 事件监听器，当用户选择文件后触发该事件。
在事件处理函数中，获取用户选择的文件对象（这里假设只选择一个文件，即取 files[0]）。
创建 FileReader 对象，它用于异步读取文件内容。
给 FileReader 的 onloadend 事件绑定回调函数，当文件读取完成（成功或失败都会触发该事件结束）后，从 reader.result 中获取到Base64编码的数据（readAsDataURL 方法会将文件内容读取为 data URL 格式，本质就是Base64编码的字符串加上特定的前缀标识文件类型等信息）。
最后将获取到的Base64编码数据设置到 <img> 标签的 src 属性上，实现图片的展示，也就完成了图片到Base64的转换及利用。

方法二：获取页面上已存在图片元素并转换为Base64

如果页面上已经有图片元素（例如通过 <img> 标签加载显示的图片），想要获取其Base64编码，可以按照以下示例代码操作：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8">
</head><body><img id="existingImage" src="example.jpg" alt="示例图片" /><button id="convertButton">转换为Base64</button><textarea id="base64Output" rows="5" cols="50"></textarea><script>const convertButton = document.getElementById('convertButton');const base64Output = document.getElementById('base64Output');const existingImage = document.getElementById('existingImage');convertButton.addEventListener('click', function () {const canvas = document.createElement('canvas');canvas.width = existingImage.width;canvas.height = existingImage.height;const context = canvas.getContext('2d');context.drawImage(existingImage, 0, 0);const base64Data = canvas.toDataURL();base64Output.value = base64Data;});</script>
</body></html>

代码逻辑如下：

先获取页面上的相关元素，包括要转换的图片元素、转换按钮以及用于显示Base64编码结果的文本框。
给转换按钮添加点击事件监听器，当点击按钮时执行以下操作：
- 创建一个 <canvas> 元素，设置其宽度和高度与要转换的图片元素尺寸一致。
- 获取 <canvas> 的 2d 绘图上下文。
- 使用 context.drawImage 方法将图片绘制到 <canvas> 上。
- 最后通过 <canvas> 元素的 toDataURL 方法获取绘制内容对应的Base64编码数据，并将其赋值到文本框的 value 属性中显示出来，从而完成了图片到Base64编码的转换并展示结果。

以上两种方法可以根据不同的应用场景，方便地在前端实现图片到Base64编码的转换操作，常用于图片的本地处理、预上传准备等情况。

文章目录

文件上传

File 对象基本属性

文件上传

大文件上传

文件格式校验

通过 type 属性校验图片格式

通过文件名扩展名校验

文件解析

一、处理图片文件流（以 Blob 格式接收文件流为例）

二、处理文本文件流

三、处理 PDF 文件流（借助 PDF.js 库来展示，需先引入 PDF.js 相关脚本）

base64 读取及转换

方法一：通过FileReader读取本地图片文件转换为Base64

方法二：获取页面上已存在图片元素并转换为Base64

相关文章：

一、处理图片文件流（以 `Blob` 格式接收文件流为例）

方法一：通过`FileReader`读取本地图片文件转换为Base64