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) {
    var that = this;
    if (!data) {
      return;
    } else {
      this.refs.filebtn.disabled = true;
      $("#loading-modal").modal('show');
      $.ajax({
        url: '/missions/upload_image',
        type: 'post',
        data: data,
        processData: false,
        contentType: false
      }).done(function(res){
        console.log(res);
        that.setState({url: res.url});
      }).fail(function(err){
        console.log(err);
        AlertModal.showWithProps("Upload Failed");
      }).always(function(){
        $("#loading-modal").modal('hide');
        that.refs.filebtn.disabled = false;
      });
    }
  },
  handleUrlChange: function(e) {
    this.setState({url: e.target.value});
  },
  render: function() {
    var form_input_name = this.props.model + "[thumb]";
    var form_input_id = this.props.model+ "_thumb";
    return (
      <div className="image-uploader-inputs row">
        <div className="col-sm-8 image-input">
          <input className="form-control" name={form_input_name} id={form_input_id} ref="urlinput" value={this.state.url || ""} onChange={this.handleUrlChange}/>
        </div>
        <div className="btn btn-primary btn-file image-input-btn">
          <input type="file" onChange={this.onFileSelect} ref="filebtn"/>
        </div>
      </div>
    );
  }
});

• 

上面的重点在于upload函数，源码是最好的文档，如果看源码需要太多注释的话，那肯定是我写的代码质量还不够高，请批评指出。

写这个的时候遇到两个问题：

• 一，这个组件是用在_form.html.slim里的，这个表单是用于信息的录入的，大家对表单应该比较熟悉，既然要用在表单里，就是给这个组件作标识,标明name和id，代码片段如下（从上面的代码中截取）：

var form_input_name = this.props.model + "[thumb]";
var form_input_id = this.props.model+ "_thumb";

• 1
• 2

<input className="form-control" name={form_input_name} id={form_input_id} ref="urlinput" value={this.state.url || ""} onChange={this.handleUrlChange}/>

• 1

• 二，使用<input type="file"/>有一个普遍的问题，自带的UI不美观。 
  
  谷歌/百度“input file btn”会有许多解决方案，家里网速差就没细看。我的做法是把这个btn设为透明，相关的代码及css如下：

<div className="btn btn-primary btn-file image-input-btn">
  <input type="file" onChange={this.onFileSelect} ref="filebtn"/>
</div>

• 1
• 2
• 3

.image-input-btn {
    float: left;
    width: 15%;
    background-image: image-url("upload.png");
    background-size: 30px;
    background-position: center;
    background-repeat: no-repeat;
    input {
      //hide file input button
      width: inherit;
      opacity: 0;
    }
  }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

接下来看看后端的代码：

def upload_image
    # => will resize later
    image_relative_path = "/assets/images/#{params[:type]}/#{Time.now.to_i}.png"
    image_path = File.expand_path(File.dirname(__FILE__) + '/../..') + "/public" + image_relative_path

    data = File.read(params[:file].path)
    img = File.new(image_path, "w+")
      if img
        img.syswrite(data)
      end
    img.close
    render json: {url: image_relative_path}
 end

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

代码同样简单，构建文件路径，保存文件，返回路径。因为开发进度的原因这里并没有对图片的大小和类型进行修改（为了减少数据传输量，在前端进行大小的修改比较合理），后面review这部分代码的时候会再更新这篇博客。

值得说说的是：

• 图片命名的问题，采用了时间戳，命名不会重复，为了方便管理，将不同类型的图片存于不同的文件夹，但是只以时间戳命名可获取的信息太少，不利于运营人员管理，后期会再仔细考虑这个问题。
• 存放路径问题，在后端代码里，rails能将图片存在rails项目文件夹的任何位置，但是客户端显示图片的时候，只能访问public文件夹里的内容，于是决定将图片存在public文件夹下。

三，总结及思考

完成这个功能不需要太久，但代码外的思考不少。图片小，甚至能用Git备份图片，也许不是长久之计，开始想念aws的好了，容灾交给aws处理最好不过了，后面试了一下AWS S3

希望自己写得越多，考虑得越远。

在家的第十天，日子过得还是那么快，终于还是有点慌。接触的东西越多，要学的就越多，兴奋之余隐隐感觉时间不够用。既然梦想着成为一名全栈工程师，就理应付出更多。