Удаленный образ, работающий на локальном экземпляре реакции, сбой на Heroku

Question

Мое локальное приложение, React, Express и Mongoose, имеет функцию публикации в блоге, где вы можете ввести в текстовое поле URL-адрес или веб-адрес удаленного изображения и сохранить его в каталоге /app/server/public/images/.Размер изображения будет изменен и отображен на странице показа блога.

Код моего PostCreateWidgit.js приведен ниже:

renderAddForm() {
    return (
      <Style>
        {this.componentStyles}
        <div className="form-content">
          <h3 className="form-title"><FormattedMessage id="createNewPost" /></h3>
          {
            this.props.addPostError ?
              (<div className="error-message">{this.props.addPostError}</div>) : (<i></i>)
          }
          <input type="text" placeholder={this.props.intl.messages.postTitle} className="form-field" ref="title" defaultValue="" />
          <div className="image-preview-block">
            <label>
              <input type="text" placeholder={this.props.intl.messages.image} className="form-field" ref="preview_image" />
              <a href="#" className="waves-effect waves-light btn btn-small" id="select-preview-file" onClick={this.uploadPreview}>
                <FormattedMessage id="select_file" />
              </a>
            </label>
            <form style={{ display: 'none' }} ref="uploadPreviewForm" id="uploadPreviewForm" action="/upload" method="post" encType="multipart/form-data">
              <input name="image" type="file" id="uploadPreview" />
            </form>
          </div>
          <label>
            {this.props.intl.messages.postContent}
            {this.renderTinyMce('')}
          </label>
          <a className="post-submit-button waves-effect waves-light btn btn-small" href="#" onClick={(e) => { e.preventDefault(); this.addPost(); }}>
            <FormattedMessage id="submit" /> <i className="material-icons right">send</i>
          </a>
          <a className="waves-effect waves-light btn red btn-small" href="#" onClick={(e) => { e.preventDefault(); this.toggleForm(); }}>
            <FormattedMessage id="cancel" />
          </a>
        </div>
      </Style>
    );
}

Однако при развертывании в Heroku и попыткесоздать сообщение в блоге с изображением URL-адреса. Я получаю следующее сообщение об ошибке:

Cannot save downloaded image: ENOENT: no such file or directory, open'/app/server/public/images/user_4567c1b46e2b715a37167c6a8a90bd44/5772c8d744198e3cdabef632136ce645.jpg

Что могло бы заставить его работать в моем локальном производственном экземпляре, но не работать в приложении Heroku?Я проверил справку и часто задаваемые вопросы по Heroku, но я не увидел ничего для React - языка, с которым я новичок.

Answer 1

Существует высокая вероятность того, что это вызвано тем, что каталог, в который вы пытаетесь сохранить, не существует.

Однако, даже если вы сможете устранить немедленную ошибку, вы, вероятно, не увидитеповедение, которое вы ожидаете на Heroku.Это потому, что его файловая система эфемерна , и поэтому любые изменения, которые вы делаете, будут потеряны при каждом перезапуске ваших динамометров.Это происходит часто (не реже одного раза в день).

Официальная рекомендация заключается в хранении загруженных файлов на сторонних сервисах, таких как Amazon S3 .