Question

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

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

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

我将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

编辑：

这是我的_form

    <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，而是在文章表单上提交了等待。当我提交文章时，图片将被上传

我想要的是当我选择一张图片时，图片立即上传到cloudinary 而不得不点击我文章表单中的提交按钮，以便我可以获得将图片放入文本区域。

Answer 1

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

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

你的结构很好，但是如果不看你的形式或详细说明你已经走了多远，就很难理解你想要的结果。

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

1 个答案: