uni-app 文件自动保存功能

在 uni-app 中实现文件自动保存功能，通常需要结合前端和后端的逻辑。以下是一个基本的实现思路：

1. 前端实现

在前端，你可以使用 uni-app 提供的 API 来监听用户输入或文件内容的变化，并定期将内容保存到本地或发送到服务器。

1.1 监听输入变化

假设你有一个文本输入框，你可以监听其内容的变化：

<template>
  <view>
    <textarea v-model="content" @input="onInput"></textarea>
  </view>
</template>

<script>
export default {
  data() {
    return {
      content: '',
      saveTimer: null
    };
  },
  methods: {
    onInput() {
      // 清除之前的定时器
      if (this.saveTimer) {
        clearTimeout(this.saveTimer);
      }
      // 设置新的定时器，延迟保存
      this.saveTimer = setTimeout(() => {
        this.saveContent();
      }, 1000); // 1秒后自动保存
    },
    saveContent() {
      // 保存内容到本地存储
      uni.setStorage({
        key: 'autoSaveContent',
        data: this.content,
        success: () => {
          console.log('内容已保存');
        }
      });

      // 或者发送到服务器
      // this.sendToServer();
    },
    sendToServer() {
      // 使用 uni.request 发送内容到服务器
      uni.request({
        url: 'https://your-server-url.com/save',
        method: 'POST',
        data: {
          content: this.content
        },
        success: (res) => {
          console.log('内容已保存到服务器', res.data);
        }
      });
    }
  },
  onLoad() {
    // 页面加载时，从本地存储中读取内容
    uni.getStorage({
      key: 'autoSaveContent',
      success: (res) => {
        this.content = res.data;
      }
    });
  }
};
</script>

1.2 定期保存

你还可以使用 setInterval 来定期保存内容：

mounted() {
  this.autoSaveInterval = setInterval(() => {
    this.saveContent();
  }, 5000); // 每5秒自动保存一次
},
beforeDestroy() {
  clearInterval(this.autoSaveInterval); // 组件销毁时清除定时器
}

2. 后端实现

如果你需要将内容保存到服务器，后端需要提供一个接口来接收并保存数据。以下是一个简单的 Node.js 示例：

const express = require('express');
const bodyParser = require('body-parser');
const fs = require('fs');
const path = require('path');

const app = express();
app.use(bodyParser.json());

app.post('/save', (req, res) => {
  const content = req.body.content;
  const filePath = path.join(__dirname, 'savedContent.txt');

  fs.writeFile(filePath, content, (err) => {
    if (err) {
      return res.status(500).send('保存失败');
    }
    res.send('保存成功');
  });
});

app.listen(3000, () => {
  console.log('服务器运行在 http://localhost:3000');
});