听说过这个叫做 Facebook 的东西吗?每隔一段时间,我们就会拍一张展示我们优秀一面的照片,我们只需要把它展示出来,让它成为我们的个人资料照片。当您点击“编辑个人资料图片”时,它会在我们的本地计算机上打开一个窗口以上传文件,从而绕过使用来自 Imgur 之类的 Web URL 的需要。我将通过向我们数据库中的用户发出补丁请求,向您介绍如何使用活动存储来执行此操作。本指南假设了一些事情:您正在使用 React 前端,Rails 后端,并且有一个数据库,其中包含一个包含个人资料图片类型列来保存文件的用户(如果您不这样做,我们可以添加最后一个) t)。如果这三件事适合您,那么让我们开始吧。

设置 Rails

我们需要做的第一件事是安装 Active Storage。在您的终端中,运行以下命令:

rails active_storage:install

这将创建一些为您处理大部分腿部工作的表格。检查您的迁移,您应该会看到如下内容:

从这里我们需要做的就是迁移更改。

rails db:migrate

对于我的项目,我在我的用户表中创建了一个名为“avatar”的列,其数据类型为字符串。该列可以被称为任何东西,但我建议使用表明它应该是某种文件的东西。如果您检查您的架构,您将看到从迁移中反映出来的迁移表。

串行器

您在这里需要做的就是用您的用户表中应该包含图像文件的任何列替换我的序列化程序中的 avatar 一词。

别忘了include Rails.application.routes.url_helpers!

模型关联宏

在您的用户模型中,创建一个 has_one_attached :avatar 关联。

控制器

您的控制器可以保持几乎相同,只需确保在您的 params 方法中包含来自 User 表的 image 属性。

如果我的用户表中没有图像怎么办?

rails g migration addImageToUsers image

rails db:migrate

这将创建一个新表,将图像列添加到我们的用户表中,并在我们迁移这些更改时更新架构。

设置 React

对于我的项目,我使用 MUI 进行样式设置。如果您不使用 MUI,它不会有太大变化,但是本指南将向您展示使用 MUI 的 React 设置。

状态

当涉及到补丁请求时,这就是您保存数据所需的全部内容:

表格

这里有一些关于表单的事情,所以让我们逐行进行。

• 第 131 行:创建表单元素。

• 第 132 行:这个网格项包含我们用来从本地机器中选择文件的按钮。

• 第 133-140 行:此按钮中的文本将根据是否使用三元表达式选择图像而改变。如果已选择图像,则显示该图像的名称。如果没有,显示“更改头像”

• 第 136 行:输入。这里我们声明它是什么类型的输入(136),它可以接受什么样的文件(137),它应该被隐藏的事实(138),以及将我们的状态变量更改为我们的图像的onChange函数已选择 (139)。

• 第 142 行:这里是另一个三元组。如果选择了图像,那么我们将显示负责运行发出补丁请求的函数的提交按钮。如果没有选择图像,则不会出现任何按钮。

发出请求

现在是时候写出负责执行我们的请求的 handleSumbit 函数了。您将需要在您发出请求的组件中有一个当前用户对象,以便 Rails 知道您正在向哪个用户发送补丁请求。

在我们的new FormData()变量中,我们将数据库中图像列的值设置为保存文件的状态变量,在本例中为用户的头像。我们追加中的字符串表示我们的模式中的内容,它旁边的变量表示已上传到我们的状态变量的文件。

出于调试目的,如果您想在发出补丁请求之前检查文件是否已上传,console.log(avatarData)在补丁请求之外。当文件上传(但未发送)后,在浏览器控制台中,您应该会看到一个文件对象,其中包含有关正在上传的文件的信息。

就是这样!

这就是启动和运行 Active Storage 所需的一切。话虽如此,让 Active Storage 在您第一次了解它时就正常运行是......具有挑战性的。因此,您可以使用以下资源来澄清任何潜在问题:

https://edgeguides.rubyonrails.org/active_storage_overview.html

https://deu.to/xvlengino510/uploading-files-in-a-reast-rails-app-using-active-storage-201c