区域丢失错误 - AWS Amplify React

Question

我正在尝试使用 amplify 和 React js 将文件上传到 AWS，但我收到 07:55.748 AWSS3Provider - error uploading Error: Region is missing。

这是我正在使用的代码。我什至尝试对区域进行编码，但它仍然无法正常工作。

import { v4 as uuid } from 'uuid';
import { withAuthenticator } from '@aws-amplify/ui-react';
import { createDrawing as CreateDrawing } from '../graphql/mutations';
import { listDrawings as ListDrawings } from '../graphql/queries';
import config from '../aws-exports';
const { aws_user_files_s3_bucket: bucket } = config;

export const listDrawings = async () => {
    const images = await API.graphql(graphqlOperation(ListDrawings));

    console.log(images.data.listDrawings.items);
    return images;
};

export const createDrawing = async (file) => {
    const region = 'eu-west-1';
    const extension = file.name.split('.')[1];
    const imgName = file.name.split('.')[0];
    if (file) {
        const { type: mimeType } = file;
        const key = `images/${uuid()}${imgName}.${extension}`;
        const url = `https://${bucket}.s3.${region}.amazonaws.com/public/${key}`;
        const inputData = { name: imgName, image: url };

        try {
            await Storage.put(key, file, {
                contentType: mimeType
            });
            await API.graphql(
                graphqlOperation(CreateDrawing, { input: inputData })
            );
        } catch (err) {
            console.log('error: ', err);
        }
    }
};

我也试过更新 aws-amplify 但它并没有再次解决我的问题。

Answer 1

在您导出文件的存储库中，有一个名为 aws-exports.js

的文件

它应该有这样的结构：

/* eslint-disable */
// WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.

const awsmobile = {
    "aws_project_region": "region",
    "aws_cognito_identity_pool_id": "xxxxxxxxxxxxxxxx",
    "aws_cognito_region": "region",
    "aws_user_pools_id": "xxxxxxxxxxxxxxxx",
    "aws_user_pools_web_client_id": "xxxxxxxxxxxxxxx",
    "oauth": {xxxxxxxx}
};


export default awsmobile;

在区域中，编辑您要添加的区域，例如 eu-west-1。

您也可以尝试像这样在文件中手动添加配置，而不是从 aws-exports.js:

导入

import Amplify, { Auth, Storage } from 'aws-amplify';

Amplify.configure({
Auth: {
    identityPoolId: 'XX-XXXX-X:XXXXXXXX-XXXX-1234-abcd-1234567890ab', //REQUIRED - Amazon Cognito Identity Pool ID
    region: 'XX-XXXX-X', // REQUIRED - Amazon Cognito Region
    userPoolId: 'XX-XXXX-X_abcd1234', //OPTIONAL - Amazon Cognito User Pool ID
    userPoolWebClientId: 'XX-XXXX-X_abcd1234', //OPTIONAL - Amazon Cognito Web Client ID
},
Storage: {
    AWSS3: {
        bucket: '', //REQUIRED -  Amazon S3 bucket name
        region: 'XX-XXXX-X', //OPTIONAL -  Amazon service region
    }
}
});

Answer 2

以上解决方案对我不起作用。所以我在 index.js:

中尝试了这个

import { Storage } from "aws-amplify";
import config from "./aws-exports";
Storage.configure({
    region: config.aws_user_files_s3_bucket_region,
    bucket: config.aws_user_files_s3_bucket,
    identityPoolId: config.aws_user_pools_id,
    level: "protected",
});

区域丢失错误 - AWS Amplify React

Region is missing error - AWS Amplify React

javascript

amazon-s3

amazon-web-services

reactjs

aws-amplify