[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)