Question

我正在使用React / Rails组合，并使用direct_upload将图像/头像附加到Rails Active Storage上，并使用AWS S3作为服务。现在一切都在上载，但返回反应的文件未呈现。我还使用Semantic-ui-react来渲染<Image/>。

我不得不在Users控制器中创建一个单独的路由和方法来保存附件，因为令牌（jwt）信息存在问题，无法通过名为<ActiveStorageProvide的库将其传递到后端，但这是另一个故事。所以这是我的代码：

React中的前端附加方法：

    <ActiveStorageProvider
        endpoint={{
          protocol: 'http',
          method: 'PUT',
          attribute: 'avatar',
          host: 'localhost',
          port: '9000',
          model: 'User',
          path: `http://localhost:9000/api/v1/users/avatar_upload/${this.props.match.params.id}`,
          model: 'User',
        }}

现在工作正常。

这会打direct_upload，然后打到我的UsersController：

  def avatar_upload
    @user.update(user_params)
    if @user.save
    render json: @user, status: :accepted
  else
   render json: { errors: @user.errors.full_messages }, status: :unprocessible_entity
  end
end

这就是我从铁轨上回来的东西

{id: 39, name: "Demian Sims", username: "dsound", avatar: "/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2…d6c8cece030978c0143cadc9c4343ced168f/IMG_2008.png", sightings: Array(1), …}
animals: [{…}]
avatar: "/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBWUT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--1941d6c8cece030978c0143cadc9c4343ced168f/IMG_2008.png"
id: 39
name: "Demian Sims"
sightings: [{…}]
username: "dsound"
__proto__: Object

然后我尝试在此处渲染：

  render() {
      console.log(this.state.user.avatar)
    return (
      <><div>
      User profile page<br />
      <p>{this.state.user.name}</p><br />
      <p>{this.state.user.username}</p><br />
      <Image src={this.state.user.avatar}  alt={this.state.user.username}  avatar/><br />

我期待一个头像图片，但是只看到img占位符。我对这一切感到陌生，所以请提前对不起。

如何将Active Storage附件从Rails呈现到React？

0 个答案: