js实现前端HTML操作用户文件的读写（已封装）

 readFile

第一个方法是 readFile，用于读取文件内容并以 Promise 对象的形式返回。它接受一个 File 对象和一个可选的编码格式参数，使用 FileReader 对象读取文件内容，当读取完成时调用 resolve 方法返回文件内容，出错时调用 reject 方法返回错误信息。

/**
 * 读取文件的方法，返回Promise对象
 * @param file 要读取的文件对象
 * @param encoding 文件编码格式，默认为'utf-8'
 */
function readFile(file: File, encoding = 'utf-8'): Promise<string> {
  return new Promise((resolve, reject) => {
    // 创建FileReader对象
    const reader = new FileReader();
    // 当文件读取完成后，调用resolve方法返回文件内容
    reader.onload = function () {
      resolve(reader.result as string);
    };
    // 当文件读取出错时，调用reject方法返回错误信息
    reader.onerror = function () {
      reject(reader.error);
    };
    // 以指定的编码格式读取文件内容
    reader.readAsText(file, encoding);
  });
}

writeFile

第二个方法是 writeFile，用于将内容写入文件并以 Promise 对象的形式返回。它接受一个要写入的文件名和文件内容，使用 Blob 和 URL 对象创建一个下载链接，模拟点击下载链接下载文件，等待下载完成后删除下载链接和 URL 对象，并调用 resolve 方法。

/**
 * 写入文件的方法，返回Promise对象
 * @param filename 要写入的文件名
 * @param content 要写入的文件内容
 */
function writeFile(filename: string, content: string): Promise<void> {
  return new Promise((resolve, reject) => {
    // 创建Blob对象
    const blob = new Blob([content], { type: 'text/plain' });
    // 创建URL对象
    const url = URL.createObjectURL(blob);
    // 创建a标签
    const a = document.createElement('a');
    a.href = url;
    a.download = filename;
    document.body.appendChild(a);
    // 模拟点击a标签下载文件
    a.click();
    // 等待下载完成后，删除a标签和URL对象，调用resolve方法
    setTimeout(() => {
      document.body.removeChild(a);
      URL.revokeObjectURL(url);
      resolve();
    }, 0);
  });
}

实现读写

第三个方法是 readAndWriteFile，使用 async/await 语法读取文件和写入文件。它接受一个要读取的文件对象和一个要写入的文件名对象，调用 readFile 方法读取文件内容，处理文件内容后调用 writeFile 方法写入文件。

事件监听器监听文件选择器的 change 事件，获取选择的文件并调用 readAndWriteFile 方法读取和写入文件。当文件读写成功或出错时分别输出相应的信息。

/**
 * 使用async/await语法读取文件和写入文件
 * @param inputFile 要读取的文件对象
 * @param outputFile 要写入的文件名
 */
async function readAndWriteFile(inputFile: File, outputFile: { name: string }): Promise<void> {
  try {
    // 读取文件
    const fileContent = await readFile(inputFile, 'utf-8');
    // 处理文件内容
    const newContent = fileContent.replace(/foo/g, 'bar');
    // 写入文件
    await writeFile(outputFile.name, newContent);
    console.log('文件写入成功');
  } catch (error) {
    console.error('文件读写出错', error);
  }
}

// 在文件选择时调用readAndWriteFile方法
const inputFile = document.querySelector('input[type="file"]') as HTMLInputElement;
inputFile.addEventListener('change', (event) => {
  // 获取选择的文件
  const file = (event.target as HTMLInputElement)?.files?.[0];
  if (file) {
    // 调用readAndWriteFile方法读取文件和写入文件
    readAndWriteFile(file, { name: 'output.txt' }).then(() => {
      console.log('文件写入成功并下载');
    }).catch((error) => {
      console.error('文件读写出错', error);
    });
  }
});

完整代码

/**
 * 读取文件的方法，返回Promise对象
 * @param file 要读取的文件对象
 * @param encoding 文件编码格式，默认为'utf-8'
 */
function readFile(file: File, encoding = 'utf-8'): Promise<string> {
  return new Promise((resolve, reject) => {
    // 创建FileReader对象
    const reader = new FileReader();
    // 当文件读取完成后，调用resolve方法返回文件内容
    reader.onload = function () {
      resolve(reader.result as string);
    };
    // 当文件读取出错时，调用reject方法返回错误信息
    reader.onerror = function () {
      reject(reader.error);
    };
    // 以指定的编码格式读取文件内容
    reader.readAsText(file, encoding);
  });
}

/**
 * 写入文件的方法，返回Promise对象
 * @param filename 要写入的文件名
 * @param content 要写入的文件内容
 */
function writeFile(filename: string, content: string): Promise<void> {
  return new Promise((resolve, reject) => {
    // 创建Blob对象
    const blob = new Blob([content], { type: 'text/plain' });
    // 创建URL对象
    const url = URL.createObjectURL(blob);
    // 创建a标签
    const a = document.createElement('a');
    a.href = url;
    a.download = filename;
    document.body.appendChild(a);
    // 模拟点击a标签下载文件
    a.click();
    // 等待下载完成后，删除a标签和URL对象，调用resolve方法
    setTimeout(() => {
      document.body.removeChild(a);
      URL.revokeObjectURL(url);
      resolve();
    }, 0);
  });
}

/**
 * 使用async/await语法读取文件和写入文件
 * @param inputFile 要读取的文件对象
 * @param outputFile 要写入的文件名
 */
async function readAndWriteFile(inputFile: File, outputFile: { name: string }): Promise<void> {
  try {
    // 读取文件
    const fileContent = await readFile(inputFile, 'utf-8');
    // 处理文件内容
    const newContent = fileContent.replace(/foo/g, 'bar');
    // 写入文件
    await writeFile(outputFile.name, newContent);
    console.log('文件写入成功');
  } catch (error) {
    console.error('文件读写出错', error);
  }
}

// 在文件选择时调用readAndWriteFile方法
const inputFile = document.querySelector('input[type="file"]') as HTMLInputElement;
inputFile.addEventListener('change', (event) => {
  // 获取选择的文件
  const file = (event.target as HTMLInputElement)?.files?.[0];
  if (file) {
    // 调用readAndWriteFile方法读取文件和写入文件
    readAndWriteFile(file, { name: 'output.txt' }).then(() => {
      console.log('文件写入成功并下载');
    }).catch((error) => {
      console.error('文件读写出错', error);
    });
  }
});