ruby基本图片上传
图片上传问题
在我们的项目里,需要实现海报的图片上传,便于更好地向外界展示一个社团活动的基本内容,但是在处理中间件相关问题时遇到了一点小小的挫折。不过这并不要紧,OSS对象存储服务固然好,但是本着交完作业就不去维护的宗旨鉴于我们的用户基数不大,用本地存储这些图片也是可行的。
使用用 CarrierWave 处理图像上传
首先在在 Gemfile 文件中添加 CarrierWave
# For picture upload,you can choose the suitable version by yourself
gem 'carrierwave', '1.2.0'
gem 'mini_magick', '4.7.0'
gem 'fog-aws', '2.0.0'
gem 'nokogiri', '1.10.4'
之后执行命令安装
$ bundle install
CarrierWave 自带了一个 Rails 生成器,用于生成图像上传程序。我们要创建一个名为 picture 的上传程
序:
$ rails generate uploader Picture
下面部分为实战样例
上传的图像应该对应于activities模型中的一个属性,先看看前人遗留数据库中有没有。
可以看到post_horizontal_image_id和post_vertical_image_id两个属性,应该是用ID寻址。
果不其然还有另一个image表,理论上我们只需要修改app/models/image.rb里的方法就可以。
但是之前他们是用图床的。如果改为本地存储这个数据模型不好使。
在activities模型中添加图像上传程序
mount_uploader :picture, PictureUploader
再把picture添加到允许修改的属性列表
def activities_params
params.require(:activities).permit(:picture)
end
到这里基本的图像上传功能已经完成了。具体实现的细节在于mount_uploader指令自动生成的一个叫picture_uploader.rb的文件。
class PictureUploader < CarrierWave::Uploader::Base
storage :file
# Override the directory where uploaded files will be stored.
# This is a sensible default for uploaders that are meant to be mounted:
def store_dir
"uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
end
# 添加一个白名单,指定允许上传的图像类型
def extension_white_list
%w(jpg jpeg gif png)
end
end
因为本地服务器不堪重负,我们学校200个社团,一个社团假设有2场活动,每场活动2张海报,预计800张照片,还需要添加一个验证图像大小的模块,以节约资源。
def picture_max_size
if picture.size > 2.megabytes
errors.add(:picture, "should be less than 2MB")
end
end
当然,我们还可以在客户端进行各种限制,例如用accept参数限制图像格式。
ruby基本图片上传的更多相关文章
- ruby on rails爬坑(三):图片上传及显示
一,问题及思路 最近在用rails + react + mysql基本框架写一个cms + client的项目,里面涉及到了图片的上传及显示,下面简单说说思路,至于这个项目的配置部署,应该会在寒假结束 ...
- [Ting's笔记Day8]活用套件carrierwave gem:(3)Deploy图片上传功能到Heroku网站
前情提要: 身为Ruby新手村民,创造稳定且持续的学习步调很重要,我用的方法就是一周在IT邦写三篇笔记,希望藉由把笔记和遇到的bug记录下来的过程,能帮助到未来想用Ruby on Rails架站的新手 ...
- [Ting's笔记Day6]活用套件carrierwave gem:(1)在Rails实现图片上传功能
carrierwave是一款经典的图片上传套件,本篇的目标是先在本地端(development)的rails项目试成功gem. (预计中集的进度会练习怎么利用Amazone S3架设图片上传Host, ...
- Jquery图片上传组件,支持多文件上传
Jquery图片上传组件,支持多文件上传http://www.jq22.com/jquery-info230jQuery File Upload 是一个Jquery图片上传组件,支持多文件上传.取消. ...
- Asp.Net Mvc 使用WebUploader 多图片上传
来博客园有一个月了,哈哈.在这里学到了很多东西.今天也来试着分享一下学到的东西.希望能和大家做朋友共同进步. 最近由于项目需要上传多张图片,对于我这只菜鸟来说,以前上传图片都是直接拖得控件啊,而且还是 ...
- 06.LoT.UI 前后台通用框架分解系列之——浮夸的图片上传
LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...
- JS图片上传预览插件制作(兼容到IE6)
其实,图片预览功能非常地常见.很意外,之前遇到上传图片的时候都不需要预览,也一直没有去实现过.现在手上的项目又需要有图片预览功能,所以就动手做了一个小插件.在此分享一下思路. 一.实现图片预览的一些方 ...
- HTML5笔记:跨域通讯、多线程、本地存储和多图片上传技术
最近做项目在前端我使用了很多新技术,这些技术有bootstrap.angularjs,不过最让我兴奋的还是使用了HTML5的技术,今天我想总结一些HTML5的技术,好记性不如烂笔头,写写文章可以很好的 ...
- 对百度的UEditor多图片上传的一些补充
我已经写了一篇文章关于百度的UEditor提取多图片上传模块.如果还没有看过,请点击以下链接查看 http://www.cnblogs.com/luke1006/p/3719029.html 出差了两 ...
随机推荐
- Linux - 设置帮助文件为中文
前言 当我们执行某个命令的 --h 或者 --help 时,默认输出的都是英文,接下来我们来说下如何将所有帮助文件显示成中文哦! 设置系统默认语言为中文 对应每个shell而言,重启后会变成英文,所 ...
- 使用Eclipse的基本配置
因本人 IntelliJ IDEA 正版授权前些日子已到期,最近开始使用 Eclipse .体验开发了一阵子,觉得除了在界面美观与前端编辑的操作上 Eclipse 与 IDEA 差距还比较大以外,其他 ...
- 前端框架VUE——数据绑定及模板语法
一.数据绑定 Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统: <div id="app"> {{ msg }} </di ...
- 基于Typora的Latex代码书写并移植到word中
如何使用Markdown编译器 编辑Latex公式 并嵌入word内 前言:对于科研党来讲,在论文中数学公式的展示是必不可少的一环,但是如果不使用公式的格式去敲,那么公式就会过于难看,会大大降低你 ...
- 【PHP数据结构】树和二叉树
树的概念其实非常地广泛,也非常地常见,大家见到这个词千万不要惊慌,因为真的每天你都能见到树结构在我们生活中的应用.比如说公司的组织结构: 另外像我们家里的族谱,或者说是我们的家庭结构,也是一个典型的树 ...
- Deprecated: __autoload() is deprecated, use spl_autoload_register()
Deprecated: __autoload() is deprecated, use spl_autoload_register() 解决:可能原因PHP版本过高,亲测discuz3.4版本使用ph ...
- 限制只有VIP会员才能下载Ecshop文章页的附件
以官方2.7.2默认模板为基础来讲述一下"如何在文章详情页限制只有VIP会员才能下载相关附件"这里假设VIP会员的等级ID为2首先修改 article.php 文件打开 /arti ...
- 小白一看就懂的postman教程
Postman的安装和注册 下载 直接在官网下载 https://www.postman.com/downloads/ postman有两种形式 客户端,下载后安装使用 网页版,在浏览器登录postm ...
- Ubuntu18.04安装jenkins
官网参考指引:https://pkg.jenkins.io/debian-stable/ wget -q -O - https://pkg.jenkins.io/debian-stable/jenki ...
- filter_var() 验证邮箱、ip、url的格式 php
验证邮箱格式的正确与否:你的第一解决方案是什么呢? 不管你们怎么思考的:反正我首先想到的就是字符串查找看是否有@符号: 但是对于结尾的.com或者.net 亦或者.cn等等越来越多的域名验证感觉棘手: ...