React Native Amplify调用Storage.put()报错：Cannot read properties of undefined (reading 'byteLength')

问题情况 #

我创建了一个Amplify React Native应用，手动关联了S3存储桶，但调用Storage.put()函数时出现如下错误：

相关代码 #

身份验证配置 #

排查解决步骤 #

1. 检查S3存储桶权限

   • 确保手动关联的S3存储桶的桶策略允许认证用户执行putObject操作，示例策略（按需修改）：

     {
       "Version": "2012-10-17",
       "Statement": [
         {
           "Effect": "Allow",
           "Principal": {
             "AWS": "arn:aws:iam::你的AWS账号ID:user/Amplify关联IAM用户"
           },
           "Action": "s3:PutObject",
           "Resource": "arn:aws:s3:::你的存储桶名称/*"
         }
       ]
     }
     

   • 同时配置CORS规则，允许应用发起PUT请求：

     <?xml version="1.0" encoding="UTF-8"?>
     <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
       <CORSRule>
         <AllowedOrigin>*</AllowedOrigin> <!-- 生产环境请指定具体域名 -->
         <AllowedMethod>PUT</AllowedMethod>
         <AllowedHeader>*</AllowedHeader>
       </CORSRule>
     </CORSConfiguration>
     

2. 验证Amplify Storage配置

   • 确认amplifyconfiguration.json中Storage模块已正确关联目标S3桶，若为手动关联，需执行amplify update storage完成配置同步。

3. 检查用户认证状态

   • 调用Storage.put()前必须确保用户已通过Amplify Auth完成登录，可提前做状态校验：

     import { Auth } from 'aws-amplify';
     
     const currentUser = await Auth.currentAuthenticatedUser();
     if (!currentUser) {
       // 引导用户登录
       return;
     }
     

4. 确认IAM角色权限

   • 检查Amplify Auth对应的IAM角色（一般命名为amplify-<项目名>-<环境>-authRole）是否拥有s3:PutObject权限，可在IAM控制台为该角色添加对应权限策略。

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