1. 在Gemfile添加

  1. gem 'carrierwave'
  2. gem 'mini_magick'

执行 bundle install

2. 生成uploader

  1. rails generate uploader UserPic

生成文件uploaders/user_pic_uploader.rb ,修改如下

  1. # 修改文件存储位置
  2. def store_dir
  3. # "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  4. "user_head_pic"
  5. end
  6.  
  7. # 设置默认头像
  8. def default_url(*args)
  9. "/assets/user_head.png"
  10. end
  11.  
  12. # 修改文件名
  13. def filename
  14. if original_filename
  15. @name ||= Digest::MD5.hexdigest(current_path)
  16. "#{@name}#{file.basename}.#{file.extension}"
  17. end
  18. end

3. 给user表添加用户头像字段

添加migrate文件并执行 rails db:migrate

  1. class AddHeadPicToUsers < ActiveRecord::Migration[5.1]
  2. def change
  3. add_column :users,:head_pic,:string,:comment=>'头像'
  4. end
  5. end

4. 修改app/models/user.rb

user.rb中添加UserPicUploader

  1. class User < ActiveRecord::Base
  2. mount_uploader :head_pic, UserPicUploader
  3. end

5. 保存头像

cotroller中对应的action如下

  1. def update_user_pic
  2. image_info = params[:avatar]||""
  3. if image_info.include? "data:image/png"
  4. png = Base64.decode64(image_info['data:image/png;base64,'.length .. -1])# Base64 编码的参数用 Base64 解码,得到数据的二进制表示,也就是图片本身的二进制数据
  5. unless Dir.exists?("#{Rails.root}/public/user_head_pic")
  6. FileUtils.mkdir_p("#{Rails.root}/public/user_head_pic")
  7. end
  8. file_name = "img_#{@current_user.user_no}.png"# 根据当前用户工号声明一个文件名
  9. file_path = "#{Rails.root}/public/user_head_pic/#{file_name}" # 确定文件保存路径
  10. File.open(file_path,'wb') do |item|# 根据文件路径创建新文件
  11. item.write(png)# 将前面的二进制数据写到文件里
  12. end
  13. @current_user.head_pic = File.open(Rails.root+"public/user_head_pic/#{file_name}")
  14. @current_user.save
  15. flash[:notice] = "保存成功!"
  16. else
  17. flash[:notice] = "保存失败!"
  18. end
  19.  
  20. redirect_to :action=>:update_head
  21. end

6. 显示头像

  1. <img src="<%= @user.head_pic.url%>" />

rails应用使用carrierwave和mini_magick上传用户头像的更多相关文章

  1. 【NopCommerce 3.1】asp.net mvc 利用jQuery from.js上传用户头像

    纯代码不解释. 在CusotmerControllers中添加上传方法 /// <summary> /// ajax上传用户头像 /// </summary> /// < ...

  2. rails中使用CarrierWave实现文件上传的功能

    之前在用django写blog的时候头像上传和头像预览都是使用原生的js实现的,之前也有写了一篇blog.好了开始进入正题 rails中实现头像上传十分的方便,只要通过CarrierWave这个gem ...

  3. 手机端用来上传用户头像的代码canvas

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. Vue+axios+Node+express实现文件上传(用户头像上传)

    Vue 页面的代码 <label for='my_file' class="theme-color"> <mu-icon left value="bac ...

  5. 微信小程序--更换用户头像/上传用户头像/更新用户头像

    changeAvatar:function (){ var that=this; wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'c ...

  6. 升级IOS8游戏上传自定义头像功能失效的问题

    为了支持arm64,之前已经折腾了很久,昨晚打包准备提交苹果审核时,测试那边的同事反馈说游戏上传自定义头像功能不可用了. 游戏上传自定义功能的简介:卡牌游戏最初是<比武招亲>中有一个充VI ...

  7. Android图片上传(头像裁切+原图原样)

    下面简单铺一下代码: (一)头像裁切.上传服务器(代码) 这里上边的按钮是头像的点击事件,弹出底部的头像选择框,下边的按钮跳到下个页面,进行原图上传. ? 1 2 3 4 5 6 7 8 9 10 1 ...

  8. cocoon + carrierwave 多图片上传用法

    gem 'cocoon' gem 'carrierwave' gem 'mini_magick' 1.图片上传carrierwave配置,github 自己手动添加的配置,没用命令生成 在app下新建 ...

  9. 文件上传之——用SWF插件实现文件异步上传和头像截取

    之前写过几篇文件上传,那些都不错.今天小编带领大家体会一种新的上传方法,及使用Flash插件实现文件上传. 使用Flash的好处就是可以解决浏览器兼容性问题.之前我写的一个快捷复制功能也是利用的Fla ...

随机推荐

  1. 一款可以安利的MarkDown编辑器

    Typeora一款可以安利的MarkDown编辑器 Typeora是什么? ​ 一款使用MarkDown的本地编辑器集结了MarkDown的所有特点并展现了简洁.高效的特点,关键是免费. 特点: 支持 ...

  2. npm创建react项目

    1:win+R 输入cmd ,打开cmd面板 2:安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org 3:安装r ...

  3. The Tao to Excellent

    1:一次只做一件事情 我不具备同时做好多件事情的能力. 2:随身携带一本书 效率最高的学习时间是那些零碎的时间. 3:听身体的 休息的标准是:如果你觉得你是在休息,那你就是在休息了. 4:如果有一件事 ...

  4. 全屏轮播插件 fullPage.js应用(基础版兼容IE7, 背景图版兼容IE8)

    /** * fullPage 1.4.5 * https://github.com/alvarotrigo/fullPage.js * MIT licensed * * Copyright (C) 2 ...

  5. nginx里配置跨域

    发布于 881天前  作者 wendal  1404 次浏览  复制  上一个帖子  下一个帖子  标签: nginx 跨域 if ($request_method = OPTIONS ) { add ...

  6. hibernate 映射 数据库number 映射为 double 为空 报错问题

    将 数据库表 映射成hibernate 实体类时 将number --- double 如果数据库中number 为空,查找数据时将报错 Can not set double field ***** ...

  7. 在一个Excel单元格内输入多行内容

    有时候,我们想在一个Excel单元格中输入多行内容,可以根据不同情况选择下面的方法来实现: 方法一:如果有大量的单元格需要这样做,采取此种设置格式的方法,选中需要这种格式的单元格,执行“格式→单元格” ...

  8. springMVC文件上传大小超过限制的问题

    [转自]https://my.oschina.net/ironwill/blog/646762 springMVC是一个非常方便的web层框架,我们使用它的文件上传也非常的方便. 我们通过下面的配置来 ...

  9. Centos 7 安装Anaconda3

    1.首先下载地址: https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/ 使用清华镜像下载速度快 2.安装 bash Anaconda3-5.1 ...

  10. redis安装和简介(2)

    承接上篇未完成的配置...此次使用的的 Redis-x64-3.2.100 版本 一.打开redis服务器 方式一:打开 redis-server.exe 显示如下图: 图中: 显示运行进程号.当前运 ...