互联网的蓬勃发展，从小企业的官方网站、内部的ERP系统等系统，到大型互联网网站，比如天猫、京东、美团等。在这个大背景下，图片上传和存储技术也在快速地发展。

1、小网站上传图片

上传图片，一个input type="type"控件，外加一个提交按钮，就搞定前端需求。前端一次性，传输文件过来，后端把文件存储在web站点的一个upload文件夹内，以日期为图片文件夹的子目录，时间+随机数作为文件名称。

2、高清大图上传

电子商务中，越来越多的商品，考虑到不同环境样式难以把控的难题，商品详情会直接做成多张长图。而用户上传高清的大图，怎样避免上传中途网络导致的上传失败问题。同一张图片，可能会上传多次，怎样避免重复上传同一张图片和一张图片存储多份。

文件上传，使用百度的“Web Uploader”组件。可以实现大文件MD5秒传，大文件分片上传和断点续传。

• 图片MD5秒传：文件上传前，调用后端接口，根据上传文件md5值进行判断，文件存在则直接返回上传成功信息。
• 图片分片上传、断点续传：分片和并发结合，将一个大文件分割成多块，并发上传，提高大文件的上传速度。每个分片上传前，都会调用后端接口，判断分片是否上传过。遇到网络问题导致传输中断，重新上传只需传输未上传的分片，而无需整个文件重新上传。当分片越小时，更能实时地看到传输进度。

3、大文件上传流程

4、代码片段

绑定上传控件“<input type="button" data-ajax="uploadImg" value="上传图片"/>”

后端文件存储规则和图片web_url

5、海量图片存储

随着业务地发展，图片、音视频文件会快速的增加，一台服务器不能存储，就需要横行扩展，根据实际去添加服务器。

上传的时候，nginx根据文件的md5值，去决定代理具体的web服务器进行上传；读取文件的时候，也是根据文件的路径中的md5值，去代理具体的服务器。