如何用React追加后端文本文件？文件不存在则自动创建

首先明确：前端无法直接操作服务器的文件系统，你当前用axios.post直接请求database.json静态文件的方式，本质是替换这个静态资源，所以会出现覆盖情况。要实现追加逻辑，必须通过后端接口处理文件读写。

步骤1：编写后端处理接口 #

你需要在后端（以Node.js/Express为例）实现一个接口，负责接收前端数据，将其追加到database.json（文件不存在则自动创建）。

示例后端代码：

const express = require('express');
const fs = require('fs').promises;
const path = require('path');
const app = express();

// 解析JSON请求体
app.use(express.json());

// 追加记录接口
app.post('/append-record', async (req, res) => {
  try {
    const filePath = path.join(__dirname, 'database.json');
    let records = [];

    // 尝试读取现有文件
    try {
      const fileContent = await fs.readFile(filePath, 'utf8');
      records = JSON.parse(fileContent);
      // 确保数据是数组格式
      if (!Array.isArray(records)) records = [];
    } catch (err) {
      // 文件不存在或解析失败，初始化空数组
      records = [];
    }

    // 追加新记录
    const newRecord = {
      created: new Date().toLocaleString(),
      ...req.body
    };
    records.push(newRecord);

    // 写入文件
    await fs.writeFile(filePath, JSON.stringify(records, null, 2), 'utf8');
    res.status(200).json({ success: true, message: '记录追加成功' });
  } catch (err) {
    console.error('追加失败:', err);
    res.status(500).json({ success: false, message: '服务器错误' });
  }
});

app.listen(3001, () => {
  console.log('后端服务运行在3001端口');
});

步骤2：修改前端代码 #

将axios请求指向后端接口，同时修正原代码中Date().toLocaleString()的错误（需用new Date().toLocaleString()）：

import axios from 'axios';

export const createResponsesRecord = (data1, data2) => {
  const data = {
    created: new Date().toLocaleString(),
    data1: data1,
    data2: data2
  };
  // 替换为你的后端服务地址
  return axios.post('http://localhost:3001/append-record', data)
    .then(res => console.log(res.data.message))
    .catch(err => console.error('追加失败:', err));
};

关键说明 #

• 后端要保证database.json始终是数组格式，这样多次追加后依然是合法JSON，方便后续读取解析。
• 前端不能直接操作服务器文件，所有文件操作必须通过后端接口完成，这是浏览器安全机制的要求。

内容的提问来源于stack exchange，提问作者Bruno