js如何读写文件

js如何读写文件

JavaScript读写文件的方式主要有：使用Node.js中的fs模块、通过HTML5的File API和Blob对象来处理文件、使用第三方库如BrowserFS。具体方法包括使用fs模块的readFile和writeFile函数、File API的FileReader和FileWriter对象等。以下将详细介绍如何在不同环境中使用这些方法来实现文件读写。

一、使用Node.js中的fs模块

Node.js是服务器端的JavaScript运行环境，它提供了许多内置模块来处理文件系统操作。fs模块是其中最常用的一个，它提供了多种方法来读写文件。

1、读取文件

在Node.js中读取文件可以使用fs模块中的readFile方法。此方法是异步的，可以避免阻塞事件循环。

const fs = require('fs');  

fs.readFile('example.txt', 'utf8', (err, data) => {  
    if (err) {  
        console.error(err);  
        return;  
    }  
    console.log(data);  
});  

在上面的代码中，我们使用了
fs.readFile
方法来读取名为
example.txt
的文件。参数
'utf8'
指定了文件的编码格式。回调函数会接收两个参数：错误对象和文件内容。如果发生错误，错误对象
err
将包含错误信息；否则，
data
将包含文件内容。

2、写入文件

要写入文件，可以使用
fs.writeFile
方法。这也是一个异步方法，可以防止阻塞事件循环。

const fs = require('fs');  

const content = 'Some content to write into the file';  
fs.writeFile('example.txt', content, 'utf8', (err) => {  
    if (err) {  
        console.error(err);  
        return;  
    }  
    console.log('File has been written');  
});  

在这个例子中，我们使用
fs.writeFile
方法将字符串
content
写入到名为
example.txt
的文件中。如果文件不存在，
fs.writeFile
会创建它；如果文件存在，它会覆盖文件的内容。

3、同步读写文件

除了异步方法，fs模块还提供了同步方法。这些方法在执行时会阻塞事件循环，因此在大型应用程序中应谨慎使用。

const fs = require('fs');  

// 同步读取文件  
try {  
    const data = fs.readFileSync('example.txt', 'utf8');  
    console.log(data);  
} catch (err) {  
    console.error(err);  
}  
// 同步写入文件  
try {  
    fs.writeFileSync('example.txt', content, 'utf8');  
    console.log('File has been written');  
} catch (err) {  
    console.error(err);  
}  

在上面的代码中，我们使用
fs.readFileSync
和
fs.writeFileSync
方法来同步读写文件。与异步方法不同，这些方法在执行时会阻塞事件循环，直到操作完成。

二、使用HTML5的File API和Blob对象

在浏览器环境中，JavaScript无法直接访问文件系统，但可以通过HTML5的File API和Blob对象来处理文件。这种方式通常用于处理用户上传的文件或生成文件供用户下载。

1、读取文件

通过HTML5的File API，可以使用FileReader对象来读取文件内容。FileReader对象提供了多种方法来读取文件，包括
readAsText
、
readAsArrayBuffer
和
readAsDataURL
。

<input type="file" id="fileInput">  

<script>  
document.getElementById('fileInput').addEventListener('change', function(event) {  
    const file = event.target.files[0];  
    const reader = new FileReader();  
    reader.onload = function(e) {  
        console.log(e.target.result);  
    };  
    reader.readAsText(file);  
});  
</script>  

在这个例子中，我们在文件输入元素上添加了一个事件监听器。当用户选择文件时，FileReader对象会读取文件内容并在读取完成后触发
onload
事件。
reader.readAsText
方法用于将文件读取为文本。

2、写入文件

虽然JavaScript无法直接写入文件系统，但可以通过生成Blob对象来创建文件，并使用URL.createObjectURL方法生成一个下载链接。

<button id="downloadButton">Download File</button>  

<script>  
document.getElementById('downloadButton').addEventListener('click', function() {  
    const content = 'Some content to write into the file';  
    const blob = new Blob([content], { type: 'text/plain' });  
    const url = URL.createObjectURL(blob);  
    const a = document.createElement('a');  
    a.href = url;  
    a.download = 'example.txt';  
    a.click();  
    URL.revokeObjectURL(url);  
});  
</script>  

在这个例子中，我们使用Blob对象创建了一个包含文本内容的文件，并生成了一个供用户下载的URL。通过创建一个隐藏的

元素并触发点击事件，可以实现文件下载。

const BrowserFS = require('browserfs');  

BrowserFS.configure({ fs: 'LocalStorage' }, function(err) {  
    if (err) {  
        console.error(err);  
        return;  
    }  
    const fs = BrowserFS.BFSRequire('fs');  
    // 写入文件  
    fs.writeFile('/example.txt', 'Some content', function(err) {  
        if (err) {  
            console.error(err);  
            return;  
        }  
        // 读取文件  
        fs.readFile('/example.txt', 'utf8', function(err, data) {  
            if (err) {  
                console.error(err);  
                return;  
            }  
            console.log(data);  
        });  
    });  
});