美文网首页
利用 paperclip 实现图片上传

利用 paperclip 实现图片上传

作者: DongHui | 来源:发表于2017-03-27 20:50 被阅读58次

    以下内容仅适供学完过全栈营rails101课程的同学参考,Github传送门paperclip

    实现图片上传功能是通过一个叫paperclipgem实现的,在安装paperclip之前有点准备工作需要做一下:
    1. 确保你的 Mac 已经安装了 imagemagick。在终端输入which convert,如果返回了/usr/local/bin/convert命令,则说明 imagemagick 已经装好了,可以跳过这一步;如果没有,则需要通过brew install imagemagick指令来安装(没有brew的需要另行安装 brew)。
    2. Gemfile目录下添加gem "paperclip", "~> 5.0.0", 记得要保存;
    3. 终端输入bundle install
    4. 终端输入rails generate paperclip group image(group指的是你的项目名称);
    5. 终端输入rake db:migrate;
    6. Ctrl + c 重启 server;
    7. app/models/group.rb文件中添加
      validates_attachment_content_type :image, content_type: /\Aimage\/.*\z/```;
    ![](https://ww3.sinaimg.cn/large/006tNc79gy1fe1nnn91jyj30ol0dz75i.jpg)
    7. 修改`_form.html.erb`文件,增加`<%= f.input :image, as: :file %>`
    ![](https://ww1.sinaimg.cn/large/006tNc79gy1fe1nq7wo3zj30o30a8dgq.jpg)
    8. 修改`app/controller/group_controller.rb`将`image`添加到`group_params   `函数中
    ![](https://ww1.sinaimg.cn/large/006tNc79gy1fe1ntvcoizj30uw0dtdhq.jpg)
    9. 现在你可以试试新建一个页面,在 new 的页面中你会发现有添加图片的选项了
    ![](https://ww4.sinaimg.cn/large/006tNc79gy1fe1nw8ec0dj30ls0fxjry.jpg)
    不过添加完图片后页面没有显示,这是因为 index页面还没有做相应的修改;
    10. 打开`app/views/groups/index.html.erb`添加```<td><%= image_tag group.image.url(:medium, class: "group_image")%></td>```
    ![](https://ww1.sinaimg.cn/large/006tNc79gy1fe1nyp5vl7j30q60jj40n.jpg)
    11. 现在再试试看,哇哦!
    ![](https://ww1.sinaimg.cn/large/006tNc79gy1fe1o1zguh4j30x508zjsz.jpg)
    12. 在 edit 和 show 页面中显示图片只需要添加这一行即可```<%= image_tag @group.image.url(:medium)%>```;
    ![](https://ww3.sinaimg.cn/large/006tNc79gy1fe1o3ycms7j30t50e6mxy.jpg)
    ![](https://ww2.sinaimg.cn/large/006tNc79gy1fe1o3jnikgj30re08mt9i.jpg)
    
    ###祝你安装顺利😄

    相关文章

      网友评论

          本文标题:利用 paperclip 实现图片上传

          本文链接:https://www.haomeiwen.com/subject/nbfdottx.html