Блог

В настоящее время я использую 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>
    );
  }
}
 

Похоже, что функция хранения не настроена должным образом для загрузки чего-либо. Я бы повторил шаги, которые вы предприняли для реализации хранилища, чтобы увидеть, что могло пойти не так.