求助：如何在AWS Amplify中由服务器端设置S3上传图片的路径/名称

核心思路 #

放弃客户端直接调用Amplify S3上传的方式，改为通过后端中转：

1. 客户端将图片文件通过API发送到你的后端服务器
2. 后端接收文件后，自行生成指定的路径和文件名
3. 后端使用AWS SDK直接将文件上传到S3存储桶

具体实现步骤 #

1. 后端配置（以Node.js为例） #

先安装依赖：

npm install aws-sdk express multer

编写上传逻辑：

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

// 配置AWS SDK（建议用IAM角色替代硬编码密钥，生产环境更安全）
AWS.config.update({
  region: 'YOUR_REGION'
});

const s3 = new AWS.S3();
// 用内存存储文件，避免本地磁盘写入
const upload = multer({ storage: multer.memoryStorage() });

// 接收客户端上传的API接口
app.post('/upload-image', upload.single('image'), async (req, res) => {
  try {
    // 服务器端自定义路径和文件名，比如结合时间戳+随机串+文件后缀
    const fileExt = req.file.originalname.split('.').pop();
    const fileName = `user-uploads/${Date.now()}-${Math.random().toString(36).slice(2, 10)}.${fileExt}`;
    
    const uploadParams = {
      Bucket: 'YOUR_S3_BUCKET_NAME',
      Key: fileName,
      Body: req.file.buffer,
      ContentType: req.file.mimetype
    };

    await s3.upload(uploadParams).promise();
    
    res.status(200).json({ 
      message: '上传成功',
      s3FileKey: fileName 
    });
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

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

2. Flutter客户端实现 #

使用http包发送文件：

import 'dart:io';
import 'package:http/http.dart' as http;

Future<void> uploadImageToBackend(File imageFile) async {
  final request = http.MultipartRequest(
    'POST',
    Uri.parse('https://your-backend-domain.com/upload-image'),
  );
  
  request.files.add(
    await http.MultipartFile.fromPath(
      'image',
      imageFile.path,
    ),
  );
  
  final response = await request.send();
  if (response.statusCode == 200) {
    final responseBody = await response.stream.bytesToString();
    print('上传完成，S3文件路径：$responseBody');
  } else {
    print('上传失败，状态码：${response.statusCode}');
  }
}

3. JavaScript客户端实现 #

用fetch发送FormData：

async function uploadImageToBackend(imageFile) {
  const formData = new FormData();
  formData.append('image', imageFile);
  
  const response = await fetch('https://your-backend-domain.com/upload-image', {
    method: 'POST',
    body: formData
  });
  
  if (response.ok) {
    const result = await response.json();
    console.log('上传成功，S3文件Key：', result.s3FileKey);
  } else {
    console.error('上传失败');
  }
}

注意事项 #

• 后端需配置S3上传权限，生产环境优先使用IAM角色而非硬编码密钥
• 可根据业务需求调整文件名规则，比如关联用户ID、分类目录等
• 大文件可考虑分块上传，上述示例适用于中小文件场景
• 确保后端API配置了正确的CORS规则，允许前端跨域请求

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