图片MD5秒传、分片上传和断点续传

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

1、小网站上传图片

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

2、高清大图上传

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

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

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

3、大文件上传流程

图片MD5秒传、分片上传和断点续传


4、代码片段

图片MD5秒传、分片上传和断点续传

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

图片MD5秒传、分片上传和断点续传

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

图片MD5秒传、分片上传和断点续传

5、海量图片存储

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

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

您可能还会对下面的文章感兴趣: