文章/答案/技术大牛

发布

社区首页 >问答首页 >Rails 5:以文章形式上传图像

问Rails 5:以文章形式上传图像
EN

Stack Overflow用户

提问于 2016-09-04 19:16:31

回答 1查看 586关注 0票数 1

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

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

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

我使用载波作为图像上传器，云中用于云存储。

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

物品表

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 %>

在我的表单中，当我创建一篇新文章时，在文件upload中，当我单击浏览并选择了一张图片时，图片不会直接上传到cloudinary，但是需要等待提交到一个文章表单。当我提交这篇文章时，图片将被上传。

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

file-upload

jquery

ruby-on-rails

回答 1

Stack Overflow用户

发布于 2016-09-04 23:02:48

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

特别要注意的是，new操作同时发送Article.new和ArticleImage.new以及field_for的使用。

您的结构很好，但是如果不查看您的表单或详细说明您已经取得了多大进展，就很难理解您到底想要什么样的结果。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/39320585

复制

相似问题

问Rails 5:以文章形式上传图像
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Rails 5:以文章形式上传图像EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Rails 5:以文章形式上传图像
EN