Rails 5：以文章形式上传图片

Question

我有包含标题和内容的文章表单。我想在表单中添加一个文件上传器，我希望这个文件上传器可以上传一张或多张图片，而无需提交文章表单。

我的意思是，当我创建一篇新文章时，在我点击提交文章表单之前，我想添加一张图片，我可以通过文件上传器上传图片，当我选择了一张图片要上传，图像将直接发送到云存储，然后缩略图将出现在浏览按钮下方。那么当我点击缩略图时，图片的url就会出现在文本区域中。

如何制作这样的文件上传器？我一直在浏览但没有找到方法，我只是找到了如何在上传到存储之前显示缩略图。

我使用 Carrierwave 进行图片上传，使用 cloudinary 进行云存储。

我有两张桌子和一个控制器

文章表

def change
   create_table :articles do |t|
     t.string :title
     t.text :content
     t.string :cover
end

Article_images 表

def change
   create_table :article_images do |t|
     t.string :image
     t.integer :article_id

  t.timestamps
end

文章模型

class Article < ApplicationRecord
    mount_uploader :cover, ImageUploader
    has_many :article_images, dependent: :destroy
    accepts_nested_attributes_for :article_images, :reject_if => :all_blank, :allow_destroy => true
    validates :title, :cover, :content, presence: true
    validates :title, uniqueness: true
end

article_image 模型

class ArticleImage < ApplicationRecord
   mount_uploader :image, ImageUploader
   belongs_to :article
end

文章控制器

class ArticlesController < ApplicationController
  before_action :authenticate_admin!, only: [:edit, :update, :destroy]
  before_action :set_article, only: [:show, :edit, :update, :destroy]

  def index
    @articles = Article.all
  end

  def show
  end

  def new
    @article = Article.new
  end

  def edit
  end

  def delete_image
    images = ArticleImage.find(params[:id])
    article_id = images.article.id
    images.destroy

    respond_to do |format|
      format.html { redirect_to article_show_url(article_id), notice: 'Image was successfully deleted.' }
      format.json { head :no_content }
    end
  end

  def create
    @article = Article.new(article_params)

    respond_to do |format|
      if @article.save
        format.html { redirect_to @article, notice: 'Article was successfully created.' }
        format.json { render :show, status: :created, location: @article }
      else
        format.html { render :new }
        format.json { render json: @article.errors, status: :unprocessable_entity }
      end
    end
  end

  def update
    respond_to do |format|
      if @article.update(article_params)
        format.html { redirect_to @article, notice: 'Article was successfully updated.' }
        format.json { render :show, status: :ok, location: @article }
      else
        format.html { render :edit }
        format.json { render json: @article.errors, status: :unprocessable_entity }
      end
    end
  end

  def destroy
    @article.destroy
    respond_to do |format|
      format.html { redirect_to articles_url, notice: 'Article was successfully destroyed.' }
      format.json { head :no_content }
    end
  end

  private
    def set_article
      @article = Article.find(params[:id])
    end
    def article_params
      params.require(:article).permit(:title, :content, :cover, :cover_cache, article_images_attributes: [:id, :image, :image_cache, :_destroy]) 
    end
end

编辑：

这是我的表格

    <div class="form-grup">
      <p>
      <%= f.label :title %>:<br/>
      <%= f.text_field :title %>
      </p>
    </div>

    <div class="form-grup">
      <p>
      <%= f.label :cover %>:<br/>
      <%= f.file_field :cover %>
      <%= f.hidden_field :cover_cache, :value => f.object.cover_cache %>
      </p>
    </div>


    <div class="form-grup">
      <p>
      <%= f.label :content %>:<br/>
      <%= f.cktext_area :content, :ckeditor => {:customConfig => asset_path('ckeditor/config.js')} %>
      </p>
    </div>

    <div class="form-grup">
      <p>
      <%= f.label :image, "Upload images:" %>
        <%= f.fields_for :article_images do |image| %>
          <%= render 'article_image_fields', f: image %><br/>
        <% end %>
        <%= link_to_add_association 'add image', f, :article_images %>
      </p>
    </div>

    <div class="form-grup actions">
      <%= f.submit %>
    </div>

这里是_article_image_fields

<% if f.object.image.present? %>
    <div class="field">
        <%= image_tag(f.object.image_url, size: "100x100") %> 
    </div>  <br/>
    <div class="field">
        <%= f.file_field :image, type: :file %>
        <%= f.hidden_field :image_cache, :value => f.object.image_cache %> 
    </div>
    <div class="field"> 
        <%= link_to_remove_association "remove image", f %>
    </div>
<% else %>

    <div class="field">
        <%= f.file_field :image, type: :file %>
        <%= f.hidden_field :image_cache, :value => f.object.image_cache %> 
    </div>
    <div class="field"> 
        <%= link_to_remove_association "remove image", f %>
    </div>
<% end %>

在我创建新文章时的表单中，在文件上传 当我点击浏览并选择了一张图片时，图片并没有直接上传到cloudinary，而是在文章表单上等待提交。当我提交文章时，图片将被上传

我想要的是当我选择一张图片时，图片立即上传到云端而无需无需点击我文章表单中的提交按钮，这样我就可以得到url 图片放在文本区域。

Answer 1

看看Rails 4 multiple image or file upload using carrierwave。

具体来说，请注意new 操作同时发送Article.new 和ArticleImage.new 以及field_for 的使用。

你的结构很好，但如果不看你的表格或详细说明你已经取得了多远，很难理解你到底想要什么结果。