从HTML提取文本并写入S3存储桶的实现指导请求

你的现有代码已经能成功提取文本框内容了，这部分逻辑没问题，但要把内容写入S3，绝对不能直接在前端暴露AWS密钥操作S3（会导致密钥泄露，任何人都能随意操作你的存储桶），下面给你两种适合新手的可行方案：

一、现有代码确认 #

你当前的代码已经完成了第一步：提取文本框内容，这部分是正确的：

<html>
    <body>
        <center>
        <label for="freeform">Please decribe what you would like photo-ai to create:</label>
        <br>
        <textarea id="freeform" name="freeform" rows="4" cols="50">
            Enter text here...
        </textarea>
        <input type="button" value="Submit my Application!" onclick="formdata()" />
        </center>
    </body>
</html>

<script>
    function formdata() 
    {
        var free_text= document.getElementById("freeform").value;
        // 这里需要添加上传逻辑
    }
</script>

二、方案1：后端中转（推荐新手，安全可控） #

通过一个简单的后端接口接收前端的文本，再由后端调用AWS SDK上传到S3，避免前端暴露密钥。

步骤1：编写后端接口（以Node.js/Express为例） #

1. 先安装依赖：

npm install express aws-sdk cors

2. 后端代码（server.js）：

const express = require('express');
const AWS = require('aws-sdk');
const cors = require('cors');
const app = express();

// 允许跨域请求（前端和后端域名不同时需要）
app.use(cors());
app.use(express.json());

// 配置AWS SDK（推荐用环境变量存储密钥，不要硬编码）
AWS.config.update({
  accessKeyId: process.env.AWS_ACCESS_KEY_ID,
  secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
  region: '你的S3桶所在区域，比如us-east-1'
});

const s3 = new AWS.S3();

// 接收前端文本并上传到S3的接口
app.post('/upload-to-s3', async (req, res) => {
  try {
    const { textContent } = req.body;
    const params = {
      Bucket: '你的S3桶名称',
      Key: `user-text-${Date.now()}.txt`, // 用时间戳生成唯一文件名
      Body: textContent,
      ContentType: 'text/plain'
    };
    await s3.putObject(params).promise();
    res.status(200).send('文本已成功上传到S3');
  } catch (err) {
    console.error(err);
    res.status(500).send('上传失败');
  }
});

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

3. 运行后端：

# 先设置环境变量（Windows用set，Mac/Linux用export）
export AWS_ACCESS_KEY_ID=你的AWS访问密钥ID
export AWS_SECRET_ACCESS_KEY=你的AWS秘密访问密钥
node server.js

步骤2：修改前端代码，发送文本到后端 #

更新formdata函数，用fetch把文本发送到后端接口：

function formdata() 
{
    var free_text= document.getElementById("freeform").value;
    // 发送文本到后端
    fetch('http://localhost:3000/upload-to-s3', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ textContent: free_text })
    })
    .then(response => response.text())
    .then(message => {
      alert(message); // 提示上传结果
      document.getElementById("freeform").value = ""; // 清空文本框
    })
    .catch(error => {
      console.error('上传出错:', error);
      alert('上传失败，请检查后端服务是否运行');
    });
}

三、方案2：用AWS Amplify简化前端操作（无需自己写后端） #

如果你不想自己写后端，可以用AWS Amplify工具链，它会帮你处理权限和签名：

步骤1：初始化Amplify项目 #

1. 安装Amplify CLI：

npm install -g @aws-amplify/cli

2. 初始化Amplify（按提示完成配置，选择添加存储）：

amplify init
amplify add storage
# 选择Content，设置权限为允许创建/读取，完成后部署
amplify push

步骤2：前端集成Amplify #

1. 安装前端依赖：

npm install aws-amplify

2. 修改前端代码：

<!-- 在<head>里添加Amplify配置 -->
<script src="https://cdn.jsdelivr.net/npm/aws-amplify@5.0.0/dist/aws-amplify.min.js"></script>
<script>
  // 替换成amplify push后生成的配置
  Amplify.configure({
    Auth: {
      region: '你的区域',
      userPoolId: '你的用户池ID',
      userPoolWebClientId: '你的客户端ID'
    },
    Storage: {
      region: '你的区域',
      bucket: '你的S3桶名称',
      identityPoolId: '你的身份池ID'
    }
  });

  async function formdata() 
  {
      var free_text= document.getElementById("freeform").value;
      try {
        const filename = `user-text-${Date.now()}.txt`;
        await Storage.put(filename, free_text, {
          contentType: 'text/plain'
        });
        alert('文本已成功上传到S3');
        document.getElementById("freeform").value = "";
      } catch (err) {
        console.error(err);
        alert('上传失败');
      }
  }
</script>

关键注意事项 #

• 绝对不要在前端代码里硬编码AWS密钥，方案1用环境变量，方案2用Amplify的身份池/用户池管理权限。
• S3桶的权限要设置合理，不要开启公共读写权限，只给后端或Amplify的身份池分配必要的上传权限。
• 生产环境中，后端要添加身份验证（比如API密钥、用户登录），避免任何人都能调用上传接口。

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