[TOC] # 前端 ## 圖片在canvas繪制、壓縮 1. 當你豎著拿手機的時候，拍完照，上傳圖片時，會出現照片自動旋轉的情況，而橫著拍照并上傳圖片時不會出現這個問題。這個時候如果想糾正圖片自動旋轉的情況，將圖片轉化為二進制的數據`(使用了binaryajax.js)`，方便獲取圖片的`exif信息`，通過獲取`exif的信息`來確定圖片旋轉的角度`(使用了exif.js)`，然后再進行圖片相應的旋轉處理。[解決方法請戳我](http://bbs.it-home.org/thread-55474-1-1.html) 2. 在`IOS`中，當圖片的大小大于 2MB時，會出現圖片壓扁的情況，這個時候需要重置圖片的比例。[解決方法請戳我](http://stackoverflow.com/questions/11929099/html5-canvas-drawimage-ratio-bug-ios) 3. 利用FileReader，讀取圖片的過程需要花費一定時間,將圖片數據注入到canvas畫布中需要一定時間，圖片壓縮的過程中，圖片越大，CPU計算消耗的時間也越長，可能會出現頓卡的情況。總之，就是這個過程當中需要花費一定時間。 4. IOS8.1的版本中有個`FileReader`的bug:`FileReader`讀取的圖片轉化為Base64時，字符串為空，[具體的問題描述請戳我](http://stackoverflow.com/questions/25999083/filereader-not-working-on-ios-8) ## 文件夾上傳 兼容性：Edge 14+，Firefox 50+，Chrome 30+，Safari 11.1+， Opera 17+ > 可以參考百度網盤網頁版做法：支持此屬性則顯示上傳文件夾選項，如果不支持次屬性不顯示上傳文件夾選項 ~~~ <input type="file" webkitdirectory"> ~~~ ## 暫停、繼續上傳 ## 通過文件判斷服務端是否已存在從而實現“快傳” ## 上傳隊列管理，支持最大并發上傳 ## 斷點續傳 分塊上傳 [無插件實現大文件分片上傳，斷點續傳](https://juejin.im/post/599804e1f265da24934aeee7#comment) [XMLHttpRequest實現HTTP協議下文件上傳斷點續傳](http://www.zhangxinxu.com/wordpress/2013/11/xmlhttprequest-ajax-localstorage-%E6%96%87%E4%BB%B6%E6%96%AD%E7%82%B9%E7%BB%AD%E4%BC%A0/) ## 進度、預估剩余時間 ## 出錯自動重試、重傳等操作 ## 上傳圖片預覽 # 后端 [Nodejs文件上傳](https://juejin.im/post/59c8fab96fb9a00a4a4cd46b#comment) # 參考資料 [移動端H5圖片上傳的那些坑](https://segmentfault.com/a/1190000006140042) [simple-uploader.js](https://github.com/simple-uploader/Uploader/blob/develop/README_zh-CN.md) [前端大文件上傳](https://juejin.im/post/5cf765275188257c6b51775f)