如何使用 Rails 和七牛云存储，在 15 分钟内打造一个图片分享社交应用原型

下面是如何使用 Rails 和七牛云存储，在 15 分钟内打造一个图片分享社交应用原型的完整攻略。

准备工作

在开始前，你需要做好以下几个准备工作。

安装 Rails

首先，你需要在本地安装 Ruby on Rails，可以通过 RubyGems 安装最新版的 Rails。

gem install rails

注册七牛账号并创建存储空间

其次，你需要注册一个七牛账号，并创建一个存储空间，将来我们会将图片存储在这个空间。

安装 qiniu gem

最后，你需要安装 qiniu gem，它是一个 Ruby SDK，方便你使用七牛云存储的 API。

gem install qiniu

创建 Rails 应用

接下来，你可以通过以下命令创建一个新的 Rails 应用。

rails new image_share
cd image_share

集成七牛云存储

配置七牛云存储

在项目中，我们需要通过 qiniu gem 将图片上传到七牛云存储，并在页面中显示。

首先，我们需要在 config/initializers/qiniu.rb 文件中添加以下代码，并将其中的 ACCESS_KEY、SECRET_KEY 和 BUCKET_NAME 替换为你自己的密钥和存储空间名称。

require 'qiniu'

Qiniu.establish_connection! access_key: 'ACCESS_KEY',
                            secret_key: 'SECRET_KEY'

BUCKET_NAME = 'BUCKET_NAME'

编写上传图片和显示图片的代码

接下来，我们需要在 app/controllers/images_controller.rb 中编写上传图片和显示图片的代码。

首先，我们需要添加 create 方法，来处理上传图片请求。在该方法中，我们首先需要将上传文件存储到本地，然后将其上传到七牛云存储，并返回上传成功后的 URL。

class ImagesController < ApplicationController
  def create
    uploaded_io = params[:image][:file]
    filename = SecureRandom.uuid + File.extname(uploaded_io.original_filename)
    File.open(Rails.root.join('public', 'uploads', filename), 'wb') do |file|
      file.write(uploaded_io.read)
    end

    key = filename
    filepath = Rails.root.join('public', 'uploads', filename).to_s
    put_policy = Qiniu::Auth::PutPolicy.new(BUCKET_NAME, key)
    uptoken = Qiniu::Auth.generate_uptoken(put_policy)
    code, result, response_headers = Qiniu::Storage.upload_with_token_2(
      uptoken, filepath, key, nil, bucket: BUCKET_NAME
    )

    render json: { url: "https://#{BUCKET_NAME}.qiniudn.com/#{filename}" }
  end
end

然后，我们需要添加 show 方法，来显示图片。在该方法中，我们只需要根据传入的文件名从七牛云存储中获取 URL 并返回即可。

class ImagesController < ApplicationController
  def show
    filename = params[:id]
    render json: { url: "https://#{BUCKET_NAME}.qiniudn.com/#{filename}" }
  end
end

最后，我们需要在 config/routes.rb 中添加两个路由，以便访问上述两个方法。

Rails.application.routes.draw do
  resources :images, only: [:create, :show]
end

编写前端代码

最后，我们需要在前端代码中，通过 JavaScript 发送上传图片的请求，并将上传成功后返回的 URL 显示在页面上。

修改前端代码

首先，我们需要在 app/views/layouts/application.html.erb 中，添加引入 qiniu.js 和一个用于显示上传结果的元素。

<%= javascript_include_tag "https://cdn.staticfile.org/qiniu-js-sdk/1.0.24/qiniu.min.js" %>

<div class="container">
  <%= yield %>

  <div id="upload_result"></div>
</div>

然后，我们需要在 app/views/images/new.html.erb 中添加上传图片的表单，并编写 JavaScript 代码。

<h1>Upload Image</h1>

<p>
  <%= form_tag images_path, method: :post, authenticity_token: true do %>
    <%= file_field_tag :file %>
    <%= submit_tag "Upload" %>
  <% end %>
</p>

<script>
  $(function() {
    $('form').submit(function(e) {
      e.preventDefault();
      var formData = new FormData($(this)[0]);
      $.ajax({
        url: $(this).attr('action'),
        type: $(this).attr('method'),
        data: formData,
        async: false,
        cache: false,
        contentType: false,
        processData: false,
        success: function(result) {
          $('#upload_result').append($('<img>').attr('src', result.url));
        },
        error: function(xhr, status, error) {
          console.log(xhr.responseText);
        }
      });
      return false;
    });
  });
</script>

运行 Rails 应用

最后，我们可以通过以下命令启动 Rails 应用，并访问 http://localhost:3000/images/new 网址上传图片并上传成功后将图片显示在页面上。

rails server

示例说明

1. 已经有一个 Rails 应用，现在需要将图片上传至七牛云存储并在页面上显示。

首先，在 config/initializers/qiniu.rb 文件中添加七牛云存储的配置信息，然后在 app/controllers/images_controller.rb 中编写上传图片和显示图片的代码，并在前端代码中添加上传图片的表单和 JavaScript 代码。最后启动 Rails 应用，在网页上上传图片并上传成功后将图片显示在页面上。

1. 已经使用了七牛云存储，但需要将图片上传和显示的代码整合到一个控制器中。

首先，将上传图片的代码迁移到 index 方法中，然后重命名 show 方法为 index 方法，将其用于显示图片并直接返回 URL。在前端代码中修改 AJAX 请求的 url，以便将其发送到 index 方法中。最后修改路由，将 show 路由改为 index 路由。完成后可以测试上传图片并将图片显示在页面上。