文件操作是前端开发的基础：掌握这些优雅技巧

2023-09-20 18:54:34

前端开发中，文件操作是必不可少的。无论是上传图片、下载文件还是读取本地文件，都离不开File相关API的使用。本文将介绍如何在浏览器和Node.js中使用File相关的API来操作文件，帮助你优雅地处理文件操作。

一、浏览器中的File操作

在浏览器中，HTML5提供了File相关的Web API，我们可以使用这些API来操作文件。

1. 文件上传

文件上传是前端开发中常见的需求。我们可以使用<input type="file">元素来实现文件上传。

<input type="file" id="file-upload">

当用户选择文件并点击上传按钮时，我们可以通过JavaScript来获取上传的文件。

const fileInput = document.getElementById('file-upload');
fileInput.addEventListener('change', () => {
  const files = fileInput.files;
  // TODO: 处理上传的文件
});

2. 文件下载

文件下载也是前端开发中常见的需求。我们可以使用<a>元素来实现文件下载。

<a href="file.txt" download>下载</a>

当用户点击下载链接时，浏览器会自动将文件下载到本地。

3. 文件读取

我们可以使用FileReader API来读取文件。FileReader API提供了readAsText()、readAsDataURL()等方法来读取文件。

const file = new File(['Hello world'], 'hello.txt', {type: 'text/plain'});
const fileReader = new FileReader();
fileReader.onload = () => {
  console.log(fileReader.result);
};
fileReader.readAsText(file);

4. 文件写入

我们可以使用FileWriter API来写入文件。FileWriter API提供了write()、seek()等方法来写入文件。

const file = new File(['Hello world'], 'hello.txt', {type: 'text/plain'});
const fileWriter = new FileWriter(file);
fileWriter.write('Hello world!');

二、Node.js中的File操作

在Node.js中，提供了fs模块来操作文件。

1. 文件上传

我们可以使用fs.createReadStream()方法来创建文件读取流，然后使用fs.createWriteStream()方法来创建文件写入流，最后将文件读取流管道到文件写入流即可实现文件上传。

const fs = require('fs');
const fileReadStream = fs.createReadStream('file.txt');
const fileWriteStream = fs.createWriteStream('file-copy.txt');
fileReadStream.pipe(fileWriteStream);

2. 文件下载

我们可以使用fs.createReadStream()方法来创建文件读取流，然后使用res.setHeader()方法设置响应头，最后使用res.pipe()方法将文件读取流管道到响应流即可实现文件下载。

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

const server = http.createServer((req, res) => {
  const filePath = path.join(__dirname, 'file.txt');
  const fileReadStream = fs.createReadStream(filePath);
  res.setHeader('Content-Type', 'text/plain');
  res.setHeader('Content-Disposition', 'attachment; filename="file.txt"');
  fileReadStream.pipe(res);
});

server.listen(3000);

3. 文件读取

我们可以使用fs.readFileSync()方法来同步读取文件，也可以使用fs.readFile()方法来异步读取文件。

const fs = require('fs');

// 同步读取文件
const data = fs.readFileSync('file.txt', 'utf-8');

// 异步读取文件
fs.readFile('file.txt', 'utf-8', (err, data) => {
  if (err) {
    throw err;
  }

  console.log(data);
});

4. 文件写入

我们可以使用fs.writeFileSync()方法来同步写入文件，也可以使用fs.writeFile()方法来异步写入文件。

const fs = require('fs');

// 同步写入文件
fs.writeFileSync('file.txt', 'Hello world!', 'utf-8');

// 异步写入文件
fs.writeFile('file.txt', 'Hello world!', 'utf-8', (err) => {
  if (err) {
    throw err;
  }

  console.log('文件写入成功');
});