远程图像处理本地反应实例在 Heroku 上失败

Posted 2023-03-11

【中文标题】远程图像处理本地反应实例在 Heroku 上失败

【英文标题】：Remote Image working on local react instance failing on Heroku

【发布时间】：2019-07-26 08:26:20

【问题描述】：

我的本​​地应用程序，一个 React、Express 和 Mongoose 应用程序，有一个博客发布功能，您可以在文本字段中输入 URL 或远程图像 Web 目标，它保存在目录位置 /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 的信息，这是一种我不熟悉的语言。

【问题讨论】：

/app/server/public/... 可以公开访问吗？

嗨丹尼尔，我该如何测试？

您可以尝试使用浏览器访问它。注意您收到的响应代码。

【参考方案1】：

这很可能是因为您尝试保存到的目录不存在。

但是，即使您可以解决即时错误，您也可能不会在 Heroku 上看到您期望的行为。那是因为its filesystem is ephemeral，所以每当您的测功机重新启动时，您所做的任何更改都会丢失。这个happens frequently（每天至少一次）。

official recommendation 是store uploaded files on a third-party service like Amazon S3。