[Ting's笔记Day6]活用套件carrierwave gem:(1)在Rails实现图片上传功能
carrierwave是一款经典的图片上传套件,本篇的目标是先在本地端(development)的rails项目试成功gem。
(预计中集的进度会练习怎么利用Amazone S3架设图片上传Host,
并再下集远端(production)实作上传,敬请期待!)
https://ithelp.ithome.com.tw/upload/images/20180904/20111177jA3W9YiK5l.png
在阅读任何Github上的README.md,有一点很重要的是知道因为环境设定的不同,必须渐渐了解哪些步骤可以跳过、哪些变数需要修改成符合自己项目性质的名称,这点身为新手的我,将会靠练习活用各式各样的gem来进步。:)
这次我们会更动的档案/文件夹如下:
Rails的构架说明
Gemfile设定Rails应用程序使用了哪些Gems套件
app放Controllers、Models和Views档案
接下来就按造步骤来实作吧(leafor)!
A.在gemfile加入套件,重启rails server:
首先我们按照carrierwave在githhub上说明档的指示,前往/项目名称/gemfile,新增代码:
gem 'carrierwave','~> 1.0'
README.md告诉我们CarrierWave的版本需求:Rails 4.0 or higher and Ruby 2.0,我的ruby 2.4.2 Rails 5.1.6,所以没有问题~
每次新增任何新的Gem到Gemfile,就要在Terminal输入bundle install处理相依性,然后rails s重启服务器。
tingdeMacBook-Air:yelpdemo tingtinghsu$ bundle install
tingdeMacBook-Air:yelpdemo tingtinghsu$ bundle info carrierwave
* carrierwave(1.2.3)
Summary: Ruby file upload library
Homepage: https://github.com/carrierwaveuploader/carrierwave
Path: /Users/tingtinghsu/.rvm/gems/ruby-2.4.2/gems/carrierwave-1.2.3
B.用rails g指令,新增Image uploader功能
接下来就可以看到carrierwave的厉害之处了,在此我需要将自己的餐厅(restaurants)数据库建立新的图片(image)字段,所以把carrier的指令客制化成自己的项目。
指令rails g uploader Image帮助我们在此路径:app/uploaders/image_uploader.rb新增了档案。
打开image_uploader.rb看看里面的类别写法:
class ImageUploader < CarrierWave::Uploader::Base
storage:file
#storage:fog
# Override the directory where uploaded files will be stored.
# def store_dir
“uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}”
end
这个部分指的是:
如果我把储存档案的地方放在本地端(localhost),就要把storage:file前的#注释拿掉
相对的,想要把储存档案的地方放在远端(Heroku),把storage:fog前的#注释拿掉
在本篇里,CarrierWave会把我上传的图片将会放在/public/uploads/restaurant/image。
C.建立数据库上传Image所需字段
建立迁移档(migration,修改数据库结构)
rails g migration add_image_to_restaurants image:string
并在数据库增加上传图片的字段:
rake db:migrate
然后重启服务器:rails s
顺利的在db/migrate跑出了add_image_to_restaurants.rb档案。打开来瞧瞧:
class AddImageToRestaurants < ActiveRecord::Migration[5.1]
def change
add_column:restaurants,:image,:string
end
end
D.修改Models,让数据库准备好存取图片的功能
接下来我们修改跟ActiveRecord有关的Models。mount Model里面,这个名为uploader上传功能小帮手,未来它会帮我们翻译数据库语言(SQL)跟数据库要数据(餐厅图片)。:
Models: app/models/restaurant.rb
class User < ActiveRecord::Base
mount_uploader:image,ImageUploader
end
在rails官网提到:
Active Record是MVC的M(Model)表现商业逻辑与数据的层级,负责新增与操作需要持久存在数据库里的数据。Active Record本身是ORM(Object Relational Mapping,物件关联映像)系统的描述。
E.修改Views
数据库的上传功能已经准备好了,接下来到Views跟表单沟通,请让表单能够接受上传的图片。
到app/views/restaurants/_form.html.erb,修改成可以上传照片的form type(表单型态)。
<%= form_with(model: restaurant,local: true,:html => { multipart: true })do |form| %>
我们来增加:「上传图片」字段,让使用者能在视觉上看得见新字段,并修改上传图片的档案(file)类型为form.file_field,不同于其他纯文字(text)字段如地址、电话的form.text_field。
<div class=“form-group”>
<%= form.label:name %>
<%= form.text_field:name,id::restaurant_name,class:“form-control”%>
</div>
…
<div class=“form-group”>
<%= form.label:image %>
<%= form.file_field:image,id::restaurant_image,class:“form-control”%>
</div>
告诉rails何时取得image。我们来到app/views/restaurants/show.html.erb,在餐厅数据前面加上代码:
<p id=“notice”><%= notice %></p>
<%= image_tag @restaurant.image_url if @restaurant.image_url.present?%>
<p>
…
<p>
<strong>Name:</strong>
<%= @restaurant.name %>
</p>
image_tag:Rails内置的Helper静态辅助方法,可以让我们建构HTML更为容易。参考这里
@restaurant.image_url:显示目前这笔餐厅数据的图片位置。
[新手常见Bug!]检查图片为nil写法:if @restaurant.image_url.present?。可以防止当某位使用者新增一笔餐厅数据、但没有附上图片的时候,show.html.erb这页网页直接当掉给你看…
F.修改Controllers
最后,我们在Controllers: app/controllers/restaurants.controller.rb加上允许上传至字段的参数,告诉rails,新的image字段是安全的(gdgfpy)。
def restaurant_params
params.require(:restaurant).permit(:name,:address,:phone,:website,:image)
end
**大功告成**
转载于:https://www.cnblogs.com/lannyQ-Q/p/10349634.html
[Ting's笔记Day6]活用套件carrierwave gem:(1)在Rails实现图片上传功能相关推荐
- [Ting's笔记Day9]活用套件Carrierwave gem:(4)使用Imagemagick修改图片大小
前情提要: 这几天我都在实验Carrierwave这套图片上传套件,也顺利部署到Heroku架站正式环境了.:) 接下来我遇到了新的问题:要如何在上传的时候,让Carrierwave gem大型siz ...
- SpringMVC:学习笔记(10)——整合Ckeditor且实现图片上传
SpringMVC:学习笔记(10)--整合Ckeditor且实现图片上传 配置CKEDITOR 精简文件 解压之后可以看到ckeditor/lang下面有很多语言的js,如果不需要那么多种语言的,可 ...
- ASP.NET工作笔记之一:图片上传预览及无刷新上传
转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...
- MUI学习笔记之图片上传和预览
MUI学习笔记之图片上传和预览 源代码是从博客园下载 我一边学习,一边注释,力求理解 <head> <meta charset="UTF-8"> <m ...
- Typora等markdown笔记软件图片链接失效的问题解决办法,图片的相对路径、绝对路径的设置,图片上传到图床的方法
文章目录 -遇到的问题:Typora编辑MD文档,图片失效的问题解决 -解决的方法: 方法一:本地图片,使用相对路径,并将图片放在和md文件的同一目录下 步骤1.Typora的图片根目录设置 步骤2. ...
- Java 开发笔记 - wangEditor 编辑器图片上传
Java 开发笔记 - wangEditor 编辑器图片上传 前言 转型 java 开发后入手的第一个项目,写写博客记录一下 该项目使用的是 sping boot + mybatis plus + t ...
- 商城项目笔记一:搭建Maven工程,利用Dubbo实现SOA面向服务框架,部署zookeeper注册中心,FastDFS框架实现图片上传,部署nginx服务器。
文章目录 1. 商城项目总结笔记: 1.1. 第一天工作记录:搭建Maven工程 1.2. 第二天工作记录:创建SOA面向服务架构,通过工具类实现分页技术 1.3. 第三天工作记录:部署nginx服务 ...
- 学海灯塔新增学习笔记上传功能
又经过一天的努力,学海灯塔学习笔记上传功能实现.欢迎访问我们的学海灯塔 学习笔记这一模块的功能和课程文件类似,由同学们上传自己的学习笔记,用户可以下载,并且可以对笔记进行打分,后期将增加文件讨论功能. ...
- 前后端分离学习笔记(5) ---[表单的增删改操作;以及为管理员上传头像]
上一篇案例中也是查询到了表单的内容–>前后端分离学习笔记(4) -[路由嵌套, 查询表单显示] 文章目录 1.前端组件页面 添加管理员操作 修改管理员信息 删除管理员 为管理员上传头像 修改密码 ...
最新文章
- [转]MCC(移动国家码)和 MNC(移动网络码)
- eclipse系列: Cannot change version of project facet Dynamic web的解决方法
- github 下载单个文件夹_从Github上下载单个文件夹的快速方式
- IDApython 命令
- Android adb.exe程序启动不起来处理方法
- python实现数据库事务回滚_使用Python脚本实现MySQL误操作的快速回滚
- java与java ee_Java EE 7社区调查结果!
- Multi-thread--提高C++性能的编程技术笔记:多线程内存池+测试代码
- UVA 188 Perfect Hash
- php 调用图,php 缩略图类(附调用示例)
- 圆形体癣是什么样子的图片_这是高手!只用一个「圆形」,也能做出高大上的PPT!...
- 如何更改计算机管理员用户名和密码,管理员如何在Windows 10中更改其他用户的密码...
- .net core快速开发平台,learun自主工作流引擎设计规范
- 谈写脚本、写代码和编程三者的区别
- 测试计划和测试方案的本质区别
- 苹果处理器性能排行榜天梯图2022 苹果处理器排行榜2022
- 常用的八个思维导图工具
- [转载]C++URL编码转换
- 2021-2022启航出发
- 读入2个整数A和B,然后输出它们的和
热门文章
- 简单聊聊Python协程
- Python这11个奇特的库,你都认识吗?你还知道哪些?
- 重磅开源 | 机器学习圣经《模式识别与机器学习》中文版PDF!
- 报告 | 斯坦福2019 AI年度报告出炉!700亿美元投入AI,自动驾驶融资最多
- matlab+awgn和wgn,噪聲強度(噪聲功率) 噪聲方差到底有什么關系? matlab中的awgn函數...
- Python中的全局变量与局部变量2
- Matlab中的continue、break和return语句
- linux挂载iso镜像进系统,linux可以加载iso镜像文件到启动项吗
- python创建新进程_Python os.fork()方法:创建新进程
- 自动轨迹绘制的python代码_python 自动轨迹绘制的实例代码