1. 在Gemfile添加

gem 'carrierwave'
gem 'mini_magick'

执行 bundle install

2. 生成uploader

rails generate uploader UserPic 

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

# 修改文件存储位置
def store_dir
# "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
"user_head_pic"
end # 设置默认头像
def default_url(*args)
"/assets/user_head.png"
end # 修改文件名
def filename
if original_filename
@name ||= Digest::MD5.hexdigest(current_path)
"#{@name}#{file.basename}.#{file.extension}"
end
end

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

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

class AddHeadPicToUsers < ActiveRecord::Migration[5.1]
def change
add_column :users,:head_pic,:string,:comment=>'头像'
end
end

4. 修改app/models/user.rb

user.rb中添加UserPicUploader

class User < ActiveRecord::Base
mount_uploader :head_pic, UserPicUploader
end

5. 保存头像

cotroller中对应的action如下

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

6. 显示头像

    <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. python多进程与协程

    1.进程的概念 什么是进程->CPU在同一时刻只能处理一个任务,只是因为cpu执行速度很快. cpu在各个任务之间来回的进行切换. 进程的概念:正在进行的一个过程或者说一个任务,而负责执行任务的 ...

  2. windows生成硬链接

    因工作电脑需要同时使用pl/sql和toad工具需要同时配置32位和64位oracle client如此增加了维护tnsnames.ora的复杂程度使用windows硬链接可以减少工作量,每次只修改源 ...

  3. oracle踩过的坑

    #默认库配置 url: jdbc:oracle:thin:@ip:1521:smis(SID名) driver: oracle.jdbc.driver.OracleDriver username: x ...

  4. ApiServer_YiChat apache项目布置过程

    1.复制文件到   /var/www/  文件夹下 2.配置项目目录 3.修改/var/www/api/public 文件夹下的隐藏文件  .htaccess     增加‘?’号 4.打开/etc/ ...

  5. MATLAB入门学习(六)

    今天学三维作图 (*^__^*)…… 三维曲线作图 用到的命令:plot3 基本格式:plot3(x,y,z,s) 这里要画曲线,你需要知道该曲线的参数方程x=x(t),y=y(t),z=z(t) 然 ...

  6. Mysql分表和分区的区别、分库分表介绍与区别(转)

    分表和分区的区别: 一,什么是mysql分表,分区 什么是分表,从表面意思上看呢,就是把一张表分成N多个小表,具体请看:mysql分表的3种方法 什么是分区,分区呢就是把一张表的数据分成N多个区块,这 ...

  7. UVa 10048 - Audiophobia(Floyd变形)

    链接: https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...

  8. Kali-linux准备内核头文件

    内核头文件是Linux内核的源代码.有时候,用户需要编译内核头文件代码,为以后使用内核头文件做准备,本节将介绍编译内核头文件的详细步骤. 准备内核头文件的具体操作步骤如下所示. (1)更新软件包列表. ...

  9. .Net Core SignalR 初体验

    前言 Asp.Net SignalR已经出来很久了,但是一直没有静下心来好好看看.昨天花了几个小时的时间看了下.首先借鉴了官方文档,如何搭建一个SignalR的Demo. 参考文章:https://d ...

  10. 视频(video)属性

    Figure 3视频相关的属性: 属性 值 描述  muted muted  定义音频的初始状态,目前仅支持muted.   crossorigin  空  定义当前视频是否是一个跨域的项目.  me ...