当前位置：首页 > VUE

vue如何实现文件读写

2026-02-24 00:35:55VUE

在Vue中实现文件读写通常需要结合浏览器API或Node.js环境（如Electron或后端服务）。以下是不同场景下的实现方法：

浏览器环境下的文件读取

使用HTML5的File API可以实现前端文件读取，但无法直接写入本地文件（受浏览器安全限制）。

文件读取示例：

<template>
  <input type="file" @change="handleFileUpload" />
</template>

<script>
export default {
  methods: {
    handleFileUpload(event) {
      const file = event.target.files[0];
      const reader = new FileReader();

      reader.onload = (e) => {
        console.log(e.target.result); // 文件内容
      };
      reader.readAsText(file); // 或readAsDataURL/readAsArrayBuffer等
    }
  }
}
</script>

浏览器环境下的文件下载

可通过创建Blob对象和临时链接实现文件下载：

vue如何实现文件读写

downloadFile(content, fileName) {
  const blob = new Blob([content], { type: 'text/plain' });
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = fileName;
  link.click();
  URL.revokeObjectURL(link.href);
}

Node.js环境下的文件读写

在Electron或SSR等Node环境中可使用fs模块：

同步读写：

const fs = require('fs');

// 读取文件
const content = fs.readFileSync('path/to/file', 'utf-8');

// 写入文件
fs.writeFileSync('path/to/file', 'Hello Vue', 'utf-8');

异步读写：

vue如何实现文件读写

fs.promises.readFile('path/to/file', 'utf-8')
  .then(content => console.log(content))
  .catch(err => console.error(err));

使用第三方库

对于复杂需求可考虑以下库：

axios：处理HTTP文件上传/下载
file-saver：简化浏览器文件保存
papaparse：处理CSV文件
xlsx：处理Excel文件

Electron特殊处理

在Electron中需要额外注意：

// 渲染进程使用ipc与主进程通信
const { ipcRenderer } = require('electron');

ipcRenderer.send('write-file', { path: 'file.txt', content: 'data' });

// 主进程处理
ipcMain.on('write-file', (event, {path, content}) => {
  fs.writeFileSync(path, content);
});

注意事项：