后臺看到訪問記錄，很多用戶提了這個需求，要求用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 中新增的屬性