原由

  最近在帮同事解决一个图片显示的问题,情形是这样的。图片通过异步上传,成功后返回一个图片的链接,再把这个链接赋给img标签的src属性,但这个过程会间歇性的出现404错误。

  404我们知道是访问一个不存在的链接,但在浏览器中直接访问这个链接,又是可以的。反复排查了前端代码和后端代码,也没发现有错误的地方。再经过一番深入了解,知道上传图片的功能用的是内网的一个文件系统fasetdfs,于是就想会不会是磁盘快满了才会出现这个问题,以前遇到过mysql所在服务器因磁盘空间不够出现过各种诡异问题。

  从负责这个文件系统架设的工程师那里拿到说是文件系统所在服务器的IP后就上去查磁盘空间大小(当时自己也不了解这个文件系统,以为这个 IP 所在的服务器就是存放文件的地方),看着磁盘空间还剩很多,就带着疑惑上网查找,发现那个工程师给我的并不是最终存放文件的服务器,只是nginx所在的机器,在打开nginx.conf看到配置后,就一切明了了。

  原来最终存放文件的是两台机器,nginx担任负载均衡作用,而负载策略是随机的。随机的负载策略加上文件系统同步文件的时间差,就造成了上传响应成功,设置img标签的src属性出现404想象。

解决的办法就是nginx根据IP去负载或者设置文件系统为主从,根据我们的业务需求选择了主从。

图片上传前预览代码

  回过头想了想,发现这地方其实存在交互不合理的地方,正确的做法应该是图片在上传前可以预览,而不是一选择图片就上传然后返回图片的链接回来。所以写了以下兼容所有浏览器的图片上传前预览的代码。

    
    Check out this Pen! 

参考链接:

中文,中英字符两端对齐的方法

在表单布局中经常需要处理字符对齐的情况,本文探索如何实现中文字符,中英混合支付两端对齐的方法 Continue reading

event.target 和 event.currentTarget 的区别

Published on January 20, 2015

sass 中 @include 与 @extend 的区别

Published on January 19, 2015