图片上传问题

在我们的项目里,需要实现海报的图片上传,便于更好地向外界展示一个社团活动的基本内容,但是在处理中间件相关问题时遇到了一点小小的挫折。不过这并不要紧,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基本图片上传的更多相关文章

  1. ruby on rails爬坑(三):图片上传及显示

    一,问题及思路 最近在用rails + react + mysql基本框架写一个cms + client的项目,里面涉及到了图片的上传及显示,下面简单说说思路,至于这个项目的配置部署,应该会在寒假结束 ...

  2. [Ting's笔记Day8]活用套件carrierwave gem:(3)Deploy图片上传功能到Heroku网站

    前情提要: 身为Ruby新手村民,创造稳定且持续的学习步调很重要,我用的方法就是一周在IT邦写三篇笔记,希望藉由把笔记和遇到的bug记录下来的过程,能帮助到未来想用Ruby on Rails架站的新手 ...

  3. [Ting's笔记Day6]活用套件carrierwave gem:(1)在Rails实现图片上传功能

    carrierwave是一款经典的图片上传套件,本篇的目标是先在本地端(development)的rails项目试成功gem. (预计中集的进度会练习怎么利用Amazone S3架设图片上传Host, ...

  4. Jquery图片上传组件,支持多文件上传

    Jquery图片上传组件,支持多文件上传http://www.jq22.com/jquery-info230jQuery File Upload 是一个Jquery图片上传组件,支持多文件上传.取消. ...

  5. Asp.Net Mvc 使用WebUploader 多图片上传

    来博客园有一个月了,哈哈.在这里学到了很多东西.今天也来试着分享一下学到的东西.希望能和大家做朋友共同进步. 最近由于项目需要上传多张图片,对于我这只菜鸟来说,以前上传图片都是直接拖得控件啊,而且还是 ...

  6. 06.LoT.UI 前后台通用框架分解系列之——浮夸的图片上传

    LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...

  7. JS图片上传预览插件制作(兼容到IE6)

    其实,图片预览功能非常地常见.很意外,之前遇到上传图片的时候都不需要预览,也一直没有去实现过.现在手上的项目又需要有图片预览功能,所以就动手做了一个小插件.在此分享一下思路. 一.实现图片预览的一些方 ...

  8. HTML5笔记:跨域通讯、多线程、本地存储和多图片上传技术

    最近做项目在前端我使用了很多新技术,这些技术有bootstrap.angularjs,不过最让我兴奋的还是使用了HTML5的技术,今天我想总结一些HTML5的技术,好记性不如烂笔头,写写文章可以很好的 ...

  9. 对百度的UEditor多图片上传的一些补充

    我已经写了一篇文章关于百度的UEditor提取多图片上传模块.如果还没有看过,请点击以下链接查看 http://www.cnblogs.com/luke1006/p/3719029.html 出差了两 ...

随机推荐

  1. Gitlab - 安装的社区版 Gitlab-ce,解决访问网页报502-Whoops, GitLab is taking too much time to respond的问题

    问题背景 在自己虚拟机(centos7)上装了 Gitlab-ce,就是社区版的 Gitlab,版本是 13.0+ 问题描述 浏览器访问 Gitlab 网站,报 502 问题翻译 502-Whoops ...

  2. 这篇 Java 基础,我吹不动了

    Hey guys,这里是程序员cxuan,欢迎你收看我最新一期的文章,这篇文章我补充了一些关于<Java基础核心总结>的内容,修改了部分错别字和语句不通顺的地方,并且对内部类.泛型等内容进 ...

  3. Java XXE漏洞典型场景分析

    本文首发于oppo安全应急响应中心: https://mp.weixin.qq.com/s?__biz=MzUyNzc4Mzk3MQ==&mid=2247485488&idx=1&am ...

  4. C# 反射 + Quartz,实现流程处理

    场景: 前不久,公司里项目经理要求我实现流程处理,比如,用户可以定义一个定时任务,每周一查看报表.定时任务很简单,用Quartz可以实现,但是用户自己选择报表就比较麻烦,因为系统的不同模块的生成报表的 ...

  5. 案例九:shell脚本自动创建多个新用户,并设置密码

    此脚本是用来批量创建用户并设置用户密码,在企业用非常实用. 脚本一 #!/bin/bash for name in $( seq 1 100 ) do useradd "user$name& ...

  6. DebugView端游日志查看工具

    端游日志工具 端游开发的同学可以通过DebugView - Windows Sysinternals | Microsoft Docs来查看游戏打印的log,它允许你监控本地系统上的debug pri ...

  7. dedecms描述文字description长度截取办法

    [field:description  function='cn_substr(@me,126)' /]

  8. 记一次 .NET 某上市工业智造 CPU+内存+挂死 三高分析

    一:背景 1. 讲故事 上个月有位朋友加wx告知他的程序有挂死现象,询问如何进一步分析,截图如下: 看这位朋友还是有一定的分析基础,可能玩的少,缺乏一定的分析经验,当我简单分析之后,我发现这个dump ...

  9. Linux系列(4) - 目录处理命令(1)

    前言 linux中一切皆文件.目录为目录文件,普通文件用来保存数据,目录文件用来保存文件 建立目录:mkdir mkdir -p [目录名] -p 递归创建目录,例子:mkdir -p LinuxTe ...

  10. 送你一个Python 数据排序的好方法

    摘要:学习 Pandas排序方法是开始或练习使用 Python进行基本数据分析的好方法.最常见的数据分析是使用电子表格.SQL或pandas 完成的.使用 Pandas 的一大优点是它可以处理大量数据 ...