rails应用paperclip

最新推荐文章于 2020-07-23 07:27:57 发布

原创最新推荐文章于 2020-07-23 07:27:57 发布 · 689 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍使用Ruby on Rails框架创建应用的过程，并实现图片及附件的上传与展示功能。包括数据库配置、模型定义、控制器与视图的设置，以及前端交互实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

rails new apt -d mysql --skip-bundle

vim Gemfile

修改源

vim config/database.yml

修改数据库密码

rails generate scaffold app title:string description:text

创建app架构

rake db:create

创建数据库

rake db:migrate

创建数据库表

rails g model picture pic_file_name:string pic_content_type:string pic_file_size:integer pic_updated_at:datetime app_id:integer
rake db:migrate

创建pictures表

rails g model attachment data_file_name:string data_content_type:string data_file_size:integer data_updated_at:datetime app_id:integer
rake db:migrate

创建attachments表

vim app/models/app.rb改为

class App < ActiveRecord::Base
has_many :pictures
accepts_nested_attributes_for :pictures
has_many :attachments
accepts_nested_attributes_for :attachments
end

vim app/models/attachment.rb改为

class Attachment < ActiveRecord::Base
    belongs_to :app
    has_attached_file :data, :default_url => "/images/:style/missing.png"
    validates_attachment_content_type :data, :content_type => /\A*\/.*\Z/
end

vim app/models/picture.rb改为

class Picture < ActiveRecord::Base
    belongs_to :app
    has_attached_file :pic, :url => "/system/:attachment/:id/:style/:filename", :styles => { :medium => "300x300>", :thumb => "100x100>" }, :default_url => "/images/:style/missing.png"
    validates_attachment_content_type :pic, :content_type => ["image/jpg", "image/jpeg", "image/png"]
end

vim app/controllers/apps_controller.rb修改app_params方法

def app_params
params.require(:app).permit(:title, :description, pictures_attributes: [:pic], attachments_attributes: [:data])
end

vim app/controllers/apps_controller.rb修改new方法

def new

    @app = App.new
    @app.pictures.build
    @app.attachments.build

    respond_to do |format|
        format.html
        format.xml { render :xml => @app }
    end
end

vim app/views/apps/_form.html.erb中 form改为

<%= form_for(@app, :html => { :multipart => true }) do |f| %>

加入

<%= f.fields_for :pictures do |pic_form|%>
        <div class="asset field">
            <%= pic_form.file_field :pic %>
        </div>
    <% end %>


    <%= f.fields_for :attachments do |att_form|%>
        <div class="asset field">
            <%= att_form.file_field :data %>
        </div>
    <% end %>

vim app/views/apps/showq.html.erb中加入

<% @app.pictures.each do |p| %>
<%=image_tag p.pic.url(:thumb) %>
<% end %>
<br>
<% @app.attachments.each do |p| %>
<%=image_tag p.data.url(:thumb) %>
<% end %>

vim multipartFile.js

function createFile() {
    var index = $("div[name=picDiv]").length;
    var text = '<div name="picDiv" class="asset field">' +
        '<input id="app_pictures_attributes_' + index + '_pic" name="app[pictures_attributes][' + index + '][pic]" type="file" />' +
        '</div>';

    $("div[name=picDiv]:last").after(text);
}

vim app/views/apps/_form.html.erb

<% javascript_include_tag "multipartFile" %>

<input type='button' value='Add file' onclick='createFile()' />

<% @app.pictures.each do |p| %>
<%=image_tag p.pic.url(:thumb) %>
<% end %>
<br>
<% @app.attachments.each do |p| %>
<%= link_to "下载文件", :action => "download", :filename => p.data.path %><br/>
<% end %>