MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

JavaScript中的文件API：读取、写入及管理本地文件

2022-02-183.5k 阅读

JavaScript文件API基础概述

在JavaScript的生态中，文件API为开发者提供了处理本地文件的能力。这些API允许我们读取文件内容、写入新文件以及对本地文件进行管理操作。这对于构建具有本地文件交互功能的Web应用程序，如文件上传、下载、本地文件编辑等场景至关重要。

浏览器环境下的JavaScript文件API主要基于File、FileReader、Blob以及URL.createObjectURL等对象和方法。在Node.js环境中，则依赖于fs（文件系统）模块来实现对文件的操作。

浏览器端文件读取

使用File对象获取文件

在浏览器中，通常通过<input type="file">元素让用户选择本地文件。当用户选择文件后，input元素的files属性会包含一个FileList对象，该对象类似于数组，每个元素都是一个File对象。File对象继承自Blob对象，包含了文件的名称、大小、类型等元数据信息。

以下是获取File对象的基本代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取File对象</title>
</head>
<body>
    <input type="file" id="fileInput">
    <script>
        const fileInput = document.getElementById('fileInput');
        fileInput.addEventListener('change', function () {
            const file = this.files[0];
            if (file) {
                console.log('文件名:', file.name);
                console.log('文件大小:', file.size);
                console.log('文件类型:', file.type);
            }
        });
    </script>
</body>
</html>

在上述代码中，当用户选择文件后，change事件被触发，通过this.files[0]获取用户选择的第一个文件，并打印出文件的相关信息。

使用FileReader读取文件内容

FileReader对象用于异步读取File或Blob对象中的内容。它提供了几种读取方法，如readAsText（以文本形式读取）、readAsArrayBuffer（以数组缓冲区形式读取）、readAsDataURL（以Data URL形式读取）等。

  1. 以文本形式读取文件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>以文本形式读取文件</title>
</head>
<body>
    <input type="file" id="fileInput">
    <script>
        const fileInput = document.getElementById('fileInput');
        fileInput.addEventListener('change', function () {
            const file = this.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function () {
                    const text = this.result;
                    console.log('文件内容:', text);
                };
                reader.readAsText(file);
            }
        });
    </script>
</body>
</html>

在这个示例中，创建了一个FileReader实例，通过readAsText方法以文本形式读取文件内容。当读取操作完成后，onload事件被触发，this.result中包含了文件的文本内容。

  1. 以数组缓冲区形式读取文件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>以数组缓冲区形式读取文件</title>
</head>
<body>
    <input type="file" id="fileInput">
    <script>
        const fileInput = document.getElementById('fileInput');
        fileInput.addEventListener('change', function () {
            const file = this.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function () {
                    const buffer = this.result;
                    console.log('数组缓冲区:', buffer);
                };
                reader.readAsArrayBuffer(file);
            }
        });
    </script>
</body>
</html>

readAsArrayBuffer方法将文件读取为一个ArrayBuffer对象，适合处理二进制数据，如图片、音频、视频等文件。

  1. 以Data URL形式读取文件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>以Data URL形式读取文件</title>
</head>
<body>
    <input type="file" id="fileInput">
    <img id="imagePreview" src="">
    <script>
        const fileInput = document.getElementById('fileInput');
        const imagePreview = document.getElementById('imagePreview');
        fileInput.addEventListener('change', function () {
            const file = this.files[0];
            if (file && (file.type.startsWith('image/'))) {
                const reader = new FileReader();
                reader.onload = function () {
                    imagePreview.src = this.result;
                };
                reader.readAsDataURL(file);
            }
        });
    </script>
</body>
</html>

readAsDataURL方法将文件内容编码为一个Data URL字符串。在上述示例中，当用户选择图片文件时，通过Data URL将图片显示在页面上。

浏览器端文件写入

在浏览器中，直接写入本地文件的操作受到安全限制，因为这可能会导致用户数据泄露或恶意篡改。然而，可以通过创建一个临时的可下载链接来实现“伪写入”，即让用户下载一个新生成的文件。

创建下载链接写入文本文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建下载链接写入文本文件</title>
</head>
<body>
    <button id="createFileButton">创建文本文件</button>
    <script>
        const createFileButton = document.getElementById('createFileButton');
        createFileButton.addEventListener('click', function () {
            const text = '这是新生成的文本文件内容';
            const blob = new Blob([text], { type: 'text/plain' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = 'newFile.txt';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        });
    </script>
</body>
</html>

在上述代码中，首先创建一个包含文本内容的Blob对象，然后使用URL.createObjectURL创建一个对象URL，通过创建一个<a>元素并设置其href和download属性，模拟文件下载操作。最后，记得移除<a>元素并撤销对象URL以释放资源。

创建下载链接写入二进制文件

对于二进制文件，如图片、音频等，原理类似，只是Blob的类型需要设置正确。以下以创建一个下载链接写入图片文件为例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建下载链接写入图片文件</title>
</head>
<body>
    <button id="createImageFileButton">创建图片文件</button>
    <script>
        const createImageFileButton = document.getElementById('createImageFileButton');
        createImageFileButton.addEventListener('click', function () {
            // 这里假设已有一个图片的ArrayBuffer数据，实际应用中可能从其他地方获取
            const imageArrayBuffer = new ArrayBuffer(1024);
            const blob = new Blob([imageArrayBuffer], { type: 'image/png' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = 'newImage.png';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        });
    </script>
</body>
</html>

在实际应用中，imageArrayBuffer可能是通过canvas绘制、fetch获取远程图片等方式得到的。

Node.js端文件读取

在Node.js中，文件操作主要依赖于fs模块，它提供了同步和异步两种方式来读取文件。

同步读取文件

const fs = require('fs');

try {
    const data = fs.readFileSync('example.txt', 'utf8');
    console.log('文件内容:', data);
} catch (err) {
    console.error('读取文件出错:', err);
}

readFileSync方法会阻塞Node.js事件循环，直到文件读取操作完成。它接受两个参数，第一个是文件路径，第二个是编码格式（如果不指定，返回的是Buffer对象）。如果读取过程中发生错误，会抛出异常，需要通过try...catch块来捕获处理。

异步读取文件

const fs = require('fs');
const path = require('path');

const filePath = path.join(__dirname, 'example.txt');
fs.readFile(filePath, 'utf8', function (err, data) {
    if (err) {
        console.error('读取文件出错:', err);
        return;
    }
    console.log('文件内容:', data);
});

readFile方法是异步的，不会阻塞事件循环。它接受三个参数，第一个是文件路径，第二个是编码格式，第三个是回调函数。回调函数的第一个参数是错误对象，如果读取成功，err为null，第二个参数data是文件内容。

Node.js端文件写入

同样在Node.js中，fs模块提供了同步和异步的文件写入方法。

同步写入文件

const fs = require('fs');

const content = '这是要写入文件的新内容';
try {
    fs.writeFileSync('newFile.txt', content);
    console.log('文件写入成功');
} catch (err) {
    console.error('写入文件出错:', err);
}

writeFileSync方法会同步写入文件内容。它接受两个参数，第一个是文件路径，如果文件不存在会创建新文件；第二个是要写入的内容。如果写入过程中发生错误，会抛出异常。

异步写入文件

const fs = require('fs');

const content = '这是异步写入文件的新内容';
fs.writeFile('asyncNewFile.txt', content, function (err) {
    if (err) {
        console.error('写入文件出错:', err);
        return;
    }
    console.log('文件异步写入成功');
});

writeFile方法异步写入文件内容，不会阻塞事件循环。它接受三个参数，第一个是文件路径，第二个是要写入的内容，第三个是回调函数，在写入完成或出错时调用。

文件管理操作

无论是在浏览器端还是Node.js端，都有一些常见的文件管理操作，如文件删除、重命名等。

Node.js端文件删除

const fs = require('fs');

const filePath = 'toBeDeleted.txt';
fs.unlink(filePath, function (err) {
    if (err) {
        console.error('删除文件出错:', err);
        return;
    }
    console.log('文件删除成功');
});

unlink方法用于删除文件，它接受文件路径作为参数，并在操作完成或出错时调用回调函数。

Node.js端文件重命名

const fs = require('fs');

const oldPath = 'oldFileName.txt';
const newPath = 'newFileName.txt';
fs.rename(oldPath, newPath, function (err) {
    if (err) {
        console.error('重命名文件出错:', err);
        return;
    }
    console.log('文件重命名成功');
});

rename方法用于重命名文件或移动文件到新的路径。它接受旧路径和新路径作为参数，并在操作完成或出错时调用回调函数。

在浏览器端，由于安全限制，直接进行文件删除和重命名等操作较为困难，但在特定的应用场景下，如在Electron应用（基于Chromium和Node.js的桌面应用开发框架）中，可以结合Node.js的fs模块实现类似的文件管理操作。

深入理解文件操作中的数据处理

在文件读取和写入过程中，数据的处理方式对于应用的性能和功能实现至关重要。

处理大文件

  1. 浏览器端处理大文件 在浏览器中处理大文件时，一次性读取整个文件可能会导致内存占用过高甚至浏览器崩溃。可以采用分块读取的方式，结合File.slice方法将大文件分割成多个小块，然后逐步读取和处理。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浏览器端分块读取大文件</title>
</head>
<body>
    <input type="file" id="bigFileInput">
    <script>
        const bigFileInput = document.getElementById('bigFileInput');
        bigFileInput.addEventListener('change', function () {
            const file = this.files[0];
            if (file) {
                const chunkSize = 1024 * 1024; // 1MB分块大小
                let offset = 0;
                const totalSize = file.size;
                const readChunks = function () {
                    const chunk = file.slice(offset, offset + chunkSize);
                    const reader = new FileReader();
                    reader.onload = function () {
                        // 处理分块数据
                        console.log('分块数据:', this.result);
                        offset += chunkSize;
                        if (offset < totalSize) {
                            readChunks();
                        }
                    };
                    reader.readAsText(chunk);
                };
                readChunks();
            }
        });
    </script>
</body>
</html>

在上述代码中，通过file.slice方法将文件分割成1MB大小的块，依次读取并处理每个块的数据。

  1. Node.js端处理大文件 在Node.js中，可以使用流（Stream）来高效处理大文件。流提供了一种逐块处理数据的方式，避免一次性加载整个文件到内存。
const fs = require('fs');

const readableStream = fs.createReadStream('bigFile.txt');
const writableStream = fs.createWriteStream('newBigFile.txt');

readableStream.on('data', function (chunk) {
    // 处理分块数据
    console.log('分块数据:', chunk.length);
    writableStream.write(chunk);
});

readableStream.on('end', function () {
    writableStream.end();
    console.log('文件处理完成');
});

readableStream.on('error', function (err) {
    console.error('读取文件出错:', err);
});

writableStream.on('error', function (err) {
    console.error('写入文件出错:', err);
});

在这个示例中，fs.createReadStream创建一个可读流，fs.createWriteStream创建一个可写流。通过readableStream的data事件逐块读取数据，并通过writableStream的write方法逐块写入数据。

数据格式转换

在文件操作中，经常需要进行数据格式的转换。例如，将文本文件内容解析为JSON对象，或者将JSON对象序列化为文本写入文件。

  1. 从文本文件读取JSON数据
const fs = require('fs');

try {
    const data = fs.readFileSync('data.json', 'utf8');
    const jsonObject = JSON.parse(data);
    console.log('解析后的JSON对象:', jsonObject);
} catch (err) {
    console.error('读取或解析文件出错:', err);
}

在上述代码中，先读取JSON格式的文本文件，然后使用JSON.parse方法将文本解析为JSON对象。

  1. 将JSON对象写入文本文件
const fs = require('fs');

const jsonObject = { name: 'John', age: 30 };
const jsonString = JSON.stringify(jsonObject, null, 2);

try {
    fs.writeFileSync('newData.json', jsonString);
    console.log('JSON对象写入文件成功');
} catch (err) {
    console.error('写入文件出错:', err);
}

这里使用JSON.stringify方法将JSON对象序列化为字符串，并设置缩进为2个空格，然后写入文件。

错误处理与最佳实践

在文件操作过程中，错误处理是必不可少的。无论是在浏览器端还是Node.js端，都可能会遇到各种错误，如文件不存在、权限不足等。

错误处理策略

  1. 浏览器端错误处理 在浏览器中使用FileReader时，除了onload事件外，还有onerror事件用于捕获读取过程中的错误。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浏览器端文件读取错误处理</title>
</head>
<body>
    <input type="file" id="fileInput">
    <script>
        const fileInput = document.getElementById('fileInput');
        fileInput.addEventListener('change', function () {
            const file = this.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function () {
                    const text = this.result;
                    console.log('文件内容:', text);
                };
                reader.onerror = function (err) {
                    console.error('读取文件出错:', err);
                };
                reader.readAsText(file);
            }
        });
    </script>
</body>
</html>

在上述代码中，通过reader.onerror事件捕获文件读取过程中的错误，并进行相应的处理。

  1. Node.js端错误处理 在Node.js中，无论是同步还是异步的文件操作方法，都有相应的错误处理机制。对于同步方法，通过try...catch块捕获错误；对于异步方法，通过回调函数的第一个参数获取错误对象。
const fs = require('fs');

const filePath = 'nonexistentFile.txt';
fs.readFile(filePath, 'utf8', function (err, data) {
    if (err) {
        console.error('读取文件出错:', err);
        return;
    }
    console.log('文件内容:', data);
});

在这个异步读取文件的示例中，通过检查回调函数的err参数来判断是否发生错误。

最佳实践建议

  1. 验证文件路径和类型 在进行文件操作前，先验证文件路径的有效性以及文件类型是否符合预期。在浏览器端，可以在用户选择文件后，检查File对象的type属性；在Node.js端，可以使用path模块检查路径的正确性。
  2. 使用流进行高效处理 如前文所述，对于大文件操作，使用流可以显著提高性能并减少内存占用。无论是读取还是写入大文件，都应优先考虑使用流的方式。
  3. 资源释放 在浏览器中，使用URL.createObjectURL创建的对象URL，在使用完毕后要及时通过URL.revokeObjectURL释放资源，避免内存泄漏。在Node.js中，虽然流会自动管理资源，但在复杂的应用场景下，也要确保及时关闭文件描述符等资源。
  4. 权限管理 在Node.js中，要注意文件操作的权限问题。确保应用程序有足够的权限进行文件的读取、写入、删除等操作。在浏览器端，虽然有安全限制，但在特定环境（如Electron应用）中，也要注意权限管理，避免因权限不足导致操作失败。

通过以上对JavaScript中文件API的深入探讨，包括文件的读取、写入及管理操作，以及相关的数据处理、错误处理和最佳实践，开发者能够更全面地掌握在不同环境下使用文件API构建强大的文件交互功能的Web应用程序或Node.js应用。无论是简单的文本文件处理，还是复杂的大文件操作和数据格式转换，都可以基于这些知识和技术实现高效、稳定的功能。