之前在用django写blog的时候头像上传和头像预览都是使用原生的js实现的,之前也有写了一篇blog。好了开始进入正题

rails中实现头像上传十分的方便,只要通过CarrierWave这个gem来实现就可以了。rails只能说他的gem都非常的好用,实现功能特别的快速。

我们先在Gemfile中引入这个gem

gem 'carrierwave'

然后执行bundle安装这个carrierwave。接下来在终端执行命令,创建头像的uploader(如果你上传的是其他的文件那么可以生成其他的uploader)

rails g uploader avatar

此命令会生成app/uploaders/avatar_uploader.rb文件。这个文件就是针对用户头像上传的配置文件,文件默认的配置如下:

class AvatarUploader < CarrierWave::Uploader::Base
storage :file def store_dir
"uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
end
end
  • storage: 方法配置了文件存储方式,默认是存储到文件。
  • __store_dir__: 方法是定义文件的存储目录。

保持默认的配置,继续往下走。接下来需要添加用户头像的存储字段:

rails g migration add_avatar_to_users avatar:string
rails db:migrate

然后到用户模型中,绑定用户头像字段和属于它的 uploader

class User < ActiveRecord::Base
mount_uploader :avatar, AvatarUploader
end

最后在视图表单中添加头像上传的文件选择框:

<%= f.label :avatar %>
<%= f.file_field :avatar %>

大功告成。现在就可以测试一下用户头像的上传功能了。如果上传成功,会在 public 目录中出现 uploads/user/avatar 目录。里面有以用户 id 命名的文件夹,文件夹中保存了上传成功的文件。而用户头像字段 avatar 则保存了文件名。使用 user.avatar 就可以获取用户的头像地址。

CarrierWave 还有着更多可配置的特性。例如文件安全上传,文件上传时进行缩放和水印处理,云端存储等。每个特性都足以写一篇文章了,所以这里就此打住。我想留作日后实际使用过后再分享。可以前往它的 Github 项目页面去了解,地址是: https://github.com/carrierwaveuploader/carrierwave

rails中使用CarrierWave实现文件上传的功能的更多相关文章

  1. zt对于C#中的FileUpload解决文件上传大小限制的问题设置

    对于C#中的FileUpload解决文件上传大小限制的问题设置 您可能没意识到,但对于可以使用该技术上载的文件的大小存在限制.默认情况下,使用 FileUpload 控件上载到服务器的文件最大为 4M ...

  2. 分享知识-快乐自己:SpringMvc中的单多文件上传及文件下载

    摘要:SpringMvc中的单多文件上传及文件下载:(以下是核心代码(拿过去直接能用)不谢) <!--设置文件上传需要的jar--> <dependency> <grou ...

  3. JavaWeb实现文件上传下载功能实例解析

    转:http://www.cnblogs.com/xdp-gacl/p/4200090.html JavaWeb实现文件上传下载功能实例解析 在Web应用系统开发中,文件上传和下载功能是非常常用的功能 ...

  4. JavaWeb实现文件上传下载功能实例解析 (好用)

    转: JavaWeb实现文件上传下载功能实例解析 转:http://www.cnblogs.com/xdp-gacl/p/4200090.html JavaWeb实现文件上传下载功能实例解析 在Web ...

  5. 【javascript】html5中使用canvas编写头像上传截取功能

    [javascript]html5中使用canvas编写头像上传截取功能 本人对canvas很是喜欢,于是想仿照新浪微博头像上传功能(前端使用canvas) 本程序目前在谷歌浏览器和火狐浏览器测试可用 ...

  6. 多文件上传 iOS功能

    多文件上传 iOS功能,原文来自ios教程网整理的,大家可以看看演示:ios.662p.com ,喜欢的朋友可以看看我的博客吧. NSURL* url = [NSURL URLWithString:@ ...

  7. JAVA中使用FTPClient实现文件上传下载实例代码

    一.上传文件 原理就不介绍了,大家直接看代码吧 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 ...

  8. JAVA中使用FTPClient实现文件上传下载

    在JAVA程序中,经常需要和FTP打交道,比如向FTP服务器上传文件.下载文件,本文简单介绍如何利用jakarta commons中的FTPClient(在commons-net包中)实现上传下载文件 ...

  9. action中实现对批量文件上传的封装

    如今,文件(尤其是图片)上传,在前后台的应用相当普遍,上传头像.共享资料等已成为最基本应用.我们很希望通过一个万能的封装方法来实现一劳永逸的效果. 接下来,就来为大家介绍具体实现. 首先,我们需要一个 ...

随机推荐

  1. ubuntu14.04server版安装redis

    此博客记录首次在ubuntu14.04上安装redis过程. 以下采用两种方式进行安装 方法一:进入redis的官网下载(地址:https://redis.io/download)目前版本为4.0.9 ...

  2. antd Icon

    引入 : import { Icon } from 'antd'; <Icon type = "home" //图标样式 theme = "filled" ...

  3. RedHat(Linux) Oracle数据库设置开机自启动

    1 首先修改/etc/oratab文件添加如下行:ycr:/u01/app/oracle/product/12.1.0/dbhome_1:Y 关于/etc/oratab文件解释如下:# This fi ...

  4. 安装ale_python_interface时遇到make错误

    1. 首先按照https://pypi.org/project/ale-python-interface/0.0.1/来安装,直接python3 -m pip 但提示缺少一个头文件ale_c_wrap ...

  5. Android(java)学习笔记1:多线程的引入

    1. 多线程的引入:

  6. Python机器学习神器:sklearn&numpy

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDE0MDMzOA==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...

  7. Nginx 作为 WebSockets 代理

    WebSocket 协议给我们提供了一个创建可以支持客户端和服务端进行双向实时通信的web应用程序的方法.相比之前使用的方法,WebSocket(作为HTML5的一部分)可以使我们更容易开的发出这种类 ...

  8. TCP-IP and Advanced Topics 课程总结与报告

    课程总结 学习了四周十六课的课程,对每一课的知识点进行总结梳理,作出一个树状的知识网络图. 本课程虽然在深度上有所欠缺,但却更有利于结构上的梳理,加深总体上对网络的理解. 本课程从Internet出发 ...

  9. vue中使用window.open会在url前自动添加本地服务器的地址bug修复

    不能写成www.baidu.com 需要写成https://www.baidu.com

  10. Selenium基本用法以及元素定位

    一.Selenium 简介 Selenium是ThroughtWorks公司一个强大的开源Web功能测试工具系列,提供一套测试函数,用于支持Web自动化测试.函数非常灵活,能够完成界面元素定位.窗口跳 ...