js 中 file 文件应用

文章目录

- 文件上传
- - 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 Blob
        const 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编码的转换并展示结果。