后台看到访问记录，很多用户提了这个需求，要求用HTML5来实现。网上搜了一下，发现这类需求很多，相关的文章和代码也很多，大部分用的是VUE，H5的也有，不过只提供了前端部分，后端的没有。然后也不完善，花了很多的时间找了一些，有的用是能用，但是小问题太多，找这些能用的代码，所花的时间都能够完全自已写一个出来了。很多代码后续维护也是个问题，找不到原技术人员，也没有完善的文档，开发维护都靠自已，这样花的时间有点不值得。

代码：https://gitee.com/xproer/up6-vue-cli

1.引入up6组件

2.配置接口地址

接口地址分别对应：文件初始化，文件数据上传，文件进度，文件上传完毕，文件删除，文件夹初始化，文件夹删除，文件列表

参考：http://www.ncmem.com/doc/view.aspx?id=e1f49f3e1d4742e19135e00bd41fa3de

3.定义事件

TML5实现大文件上传下载，HTML5实现大文件上传下载解决方案，HTML5实现大文件上传下载思路，HTML5实现大文件上传下载源码，HTML5实现大文件上传下载实例，HTML5实现大文件分块上传下载，HTML5实现大文件分片上传下载，HTML5实现大文件切片上传下载，HTML5实现大文件加密上传下载，HTML5实现文件夹上传下载，

用户上传的文件比较大，有20G左右，直接用HTML传的话容易失败，服务器也容易出错，需要分片，分块，分割上传。也就是将一个大的文件分成若干个小文件块来上传，另外就是需要实现秒传功能和防重复功能，秒传就是用户如果上传过这个文件，那么直接在数据库中查找记录就行了，不用再上传一次，节省时间，实现的思路是对文件做MD5计算，将MD5值保存到数据库，算法可以用MD5，或者CRC，或者SHA1，这个随便哪个算法都行。

分片还需要支持断点续传，现在HTML5虽然提供了信息记录功能，但是只支持到了会话级，也就是用户不能关闭浏览器，也不能清空缓存。但是有的政府单位上传大文件，传了一半下班了，明天继续传，电脑一关结果进度信息就丢失了，这个是他们的一个痛点。

切片的话还有一点就是在服务器上合并，一个文件的所有分片数据上传完后需要在服务器端进行合并操作。

支持文件下载，批量下载，下载断点续传，加密下载，端到端加密，加密算法支持国密SM4，多线程下载

支持在服务端保存文件夹层级结构，支持将文件夹层级结构信息保存到数据库中，支持下载时能够将文件夹层级结构下载下来，支持下载文件夹，下载文件夹支持断点续传，

支持加密传输，包括加密上传，加密下载，加密算法支持国密SM4，

对于大文件的处理，无论是用户端还是服务端，如果一次性进行读取发送、接收都是不可取，很容易导致内存问题。所以对于大文件上传，采用切块分段上传

从上传的效率来看，利用多线程并发上传能够达到最大效率。

1.下载示例

https://gitee.com/xproer/up6-vue-cli

将up6组件复制到项目中

示例中已经包含此目录

1.引入up6组件

2.配置接口地址

接口地址分别对应：文件初始化，文件数据上传，文件进度，文件上传完毕，文件删除，文件夹初始化，文件夹删除，文件列表

参考：http://www.ncmem.com/doc/view.aspx?id=e1f49f3e1d4742e19135e00bd41fa3de

3.处理事件

启动测试

启动成功

效果

数据库

源码工程文档：https://drive.weixin.qq.com/s?k=ACoAYgezAAw1dWofra

源码报价单：https://drive.weixin.qq.com/s?k=ACoAYgezAAwoiul8gl

OEM版报价单：https://drive.weixin.qq.com/s?k=ACoAYgezAAwuzp4W0a

产品源代码：https://drive.weixin.qq.com/s?k=ACoAYgezAAwbdKCskc
授权码生成器：https://drive.weixin.qq.com/s?k=ACoAYgezAAwTIcFph1

很多网站上，都有一个点击图片或点击某个链接会将指定的图片下载到本地的功能，而这个功能就需要html 元素中的 A 标签的 download 属性来实现，接下来飞鸟慕鱼博客就来说一说关于使用html或js实现图片点击下载的功能。

A 标签的 download 属性

download：属性为 A 标签在 HTML5 中新增加的一个属性，它可以强制触发浏览器的下载操作。

语法：

<a href="text.jpg" download="下载后的文件名称" >点击我可下载图片</a>

例：使用 html A 标签下载图片

HTML代码：

<a href="text.jpg" download="text">
 <img src="text.jpg" >
</a>

1、download 属性规定被下载的超链接目标。

2、在 <a> 标签中必须设置 href 属性。

3、该属性也可以设置一个值来规定下载文件的名称。所允许的值没有限制，

js + html 实现下载

如果不方便使用A标签来实现下载，可以使用JS生成A元素的形式，来实现同样的效果。

案例代码：

<img id="mochu_img" src="test.jpg" >
<button type="button" οnclick="Download_Img()">点击下载图片</button>
<script>
 function Download_Img() {
 var img = document.getElementById('mochu_img'); // 获取要下载的图片
 var url = img.src; // 获取图片地址
 var a = document.createElement('a'); // 创建一个a节点插入的document
 var event = new MouseEvent('click') // 模拟鼠标click点击事件
 a.download = 'mochu_img' // 设置a节点的download属性值
 a.href = url; // 将图片的src赋值给a节点的href
 a.dispatchEvent(event) // 触发鼠标点击事件
 }
</script>

download 属性补充说明

1、并不是所有的浏览器支持此属性，Firefox 和 Chrome是支持的

2、Chrome 浏览器，在本地测试时失效

3、download 属性，为html5 中新增的属性