#javascript #html #reactjs #amazon-web-services
#javascript #HTML #reactjs #amazon-веб-сервисы
Вопрос:
В настоящее время я использую React и AWS, где я пытаюсь добавить функцию, позволяющую пользователям загружать изображение профиля. Я создал поле, чтобы пользователи могли выбрать желаемое изображение профиля, но после выбора изображения я получаю сообщение об ошибке, в котором говорится Unhandled Rejection (TypeError): Storage.put is not a function
. Кто-нибудь знает, что происходит? Вот код, который я использую для выбора изображения.
export default class Settings extends Component {
constructor(props) {
super(props);
this.state = {
image: "",
};
}
onOpenFileDialog = () => {
let fileInput = React.createRef();
fileInput.current.click();
};
onProcessFile = async (e) => {
e.preventDefault();
let reader = new FileReader();
const file = e.target.files[0];
try {
reader.readAsDataURL(file);
} catch (err) {
alert(err);
}
reader.onloadend = () => {
this.setState({
image: reader.result
})
};
const { id } = await Auth.currentUserPoolUser();
Storage.put(`${id}-profile.png`, file, {
contentType: "image/png"
})
.then(result => console.log(result))
.catch(err => alert(err));
};
render() {
return (
<div className="settings">
<ControlLabel className="Label">Profile Picture: </ControlLabel>
<FormGroup controlId="photo" bsSuze="large">
<a href="">
<input
type="file"
onChange={this.onProcessFile}
ref={this.fileInput}
hidden={true}
/>
</a>
<img src={this.state.image} alt="Profile" width="320" height="320" onClick={this.OnOpenFileDialog} />
</FormGroup>
</div>
);
}
}
Ответ №1:
Похоже, что функция хранения не настроена должным образом для загрузки чего-либо. Я бы повторил шаги, которые вы предприняли для реализации хранилища, чтобы увидеть, что могло пойти не так.
Комментарии:
1. Похоже, это была очень простая проблема с функцией хранения.
2. @BrandonMacLeod Можете ли вы упомянуть, каким было решение?