区域丢失错误-AWS Amplify React

Question

我正试图使用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",
});