ruby on rails爬坑（三）：图片上传及显示

一，问题及思路

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

rails中图片上传及显示要解决主要问题是：

• 图片存在哪？
• 图片格式大小？
• 客户端怎么显示图片？

因为这是个小项目，估计最多1000张图片，最多占用空间1G，所以采取相对简便的方法：图片保存在rails的public文件夹里（也就是保存在部署该项目的主机中），如果图片比较多的话，还是推荐用亚马逊云提供的服务AWS S3（理解为一个硬盘，S3提供了接口给你存取东西，安全，管理方便）。

大概的思路是，前端通过<input type="file"/>选择文件，发送ajax请求到后端的controller，controller将请求的图片数据进行大小裁剪、类型转换后保存到本地指定的文件夹，同时将路径返回，用于显示图片。

二，实践

思路比较简单，所以话不多说，直接上代码：

前端代码整合在react写的一个图片上传组件里，image_uploader.js.jsx代码如下

var ImageUploader = React.createClass({
  getInitialState: function() {
   
    return {
      url: this.props.url
    };
  },
  onFileSelect: function(e) {
   
    var that = this;
    var files = e.target.files;
    if (files.length <= 0) {
      AlertModal.showWithProps("No file selected");
      return;
    }
    var data = new FormData();
    $.each(files, function(key, value) {
   
      data.append('file', value);
      data.append('type', that.props.type)
    });
    this.upload(data);
  },
  upload: function(data) {