React借助AWS Amplify上传文件报Region is missing错误，硬编码区域、升级依赖均无效

Region is missing是S3存储组件初始化时未读取到对应区域配置，结合你给出的代码，核心漏项和问题点如下：

• 未全局注入Amplify配置：你仅从aws-exports中解构了桶名，没有调用Amplify.configure()把配置传给Amplify核心服务，导致Storage完全读不到S3的区域、桶等参数
• 手动硬编码的区域仅用于拼接URL，不会被Storage组件识别，属于无效配置
• 存在隐式导入遗漏：代码中用到的API、graphqlOperation、Storage未显式从aws-amplify导入

1. 完成应用入口的全局初始化 #

在应用启动的最早期文件（通常为src/index.js/src/main.jsx）中，在渲染根组件前添加配置注入逻辑：

import Amplify from 'aws-amplify'
import awsExports from './aws-exports' // 路径和你业务文件中的导入路径保持一致
Amplify.configure(awsExports)

注意：全局初始化必须放在应用入口，不要放在业务组件文件中，否则Storage初始化时会读取不到配置。

2. 若仍报错，显式覆写Storage配置 #

如果aws-exports中存储区域字段缺失、或和实际S3桶区域不一致，可在配置注入时手动指定存储参数：

Amplify.configure({
  ...awsExports,
  Storage: {
    AWSS3: {
      bucket: awsExports.aws_user_files_s3_bucket,
      region: 'eu-west-1' // 填写你S3桶实际所在的区域
    }
  }
})

3. 修正业务代码的冗余和遗漏 #

• 补充缺失的导入：

import { Storage, API, graphqlOperation } from 'aws-amplify'

• 替换手动拼接URL的逻辑，避免路径错误：

export const createDrawing = async (file) => {
    const extension = file.name.split('.')[1];
    const imgName = file.name.split('.')[0];
    if (!file) return;
    const { type: mimeType } = file;
    const key = `images/${uuid()}-${imgName}.${extension}`; // 不需要手动加public前缀，Amplify根据level自动处理
    try {
        // 上传文件，获取Amplify自动生成的存储标识
        const uploadResult = await Storage.put(key, file, {
            contentType: mimeType,
            level: 'public' // 明确公开访问层级
        });
        // 获取可直接访问的公开URL
        const { url: imageUrl } = await Storage.get(uploadResult.key);
        const inputData = { name: imgName, image: imageUrl };
        await API.graphql(
            graphqlOperation(CreateDrawing, { input: inputData })
        );
    } catch (err) {
        console.log('上传或写入数据错误: ', err);
    }
};

4. 版本适配检查 #

如果升级过aws-amplify到v6+版本，确认使用的是新版配置语法，避免旧版初始化逻辑失效。

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