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";

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

• 二，使用<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>

.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; } }

接下来看看后端的代码：

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

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

值得说说的是：

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

三，总结及思考

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

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

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