记录-保存数据（带有多张图片上传）

应公司要求，需要做一个学生上传笔记的功能，之前上传图片的做法都是点击确定上传选中的图片就直接将图片上传到服务器上，然后返回保存的路径，最后在保存的时候将这些路径提交上去，这样子的做法有个弊端，，上传了一些图片之后，没有点击保存，这样子的话，服务器上就会白白存在这些图片，而这些图片 并没有被使用，极大的占用了服务器的内存资源，于是借着这次上传笔记的功能，开始改善这样子的做法

一开始的想法是：图片上传后先保存在js的array中，然后通过window.URL.createObjectURL生成预览的地址在页面上预览，然后提交的时候将这部分的图片和笔记的标题等数据通过ajax一起提交上去（数据添加到FormData对象中），于是便开始着手做pc端，由于测试上传的图片都比较小（一两百K而已），pc端的没有问题，之后便开始着手做手机端，做完之后，发现了一个问题，拍照的图片上传不了，后面找了很久，发现tomcat的post请求默认限制2M，手机上拍出的图片最少都是5M起，于是便上传不了，

接下来的想法便是在js中对图片进行压缩，网上找了一遍，最后使用canvas压缩（压缩图片的js在文章末尾），由于压缩的js使用回调方式，期间出了点问题（将图片放进array中建议使用push方法）。然后解决了图片放进array中的问题后，发现压缩后是Blob文件，上传到服务器中并没有文件名，于是声明了一个存储文件名的Array，然后在将图片append进FormData的时候，第三个参数传递对应的文件名。发布之后发现，一次性上传5张以上的图片的时候，即使压缩过后，加起来的图片依然超过2M，于是便限制了单次上传3张图片，后面运营那边反应体验不好，最后改为分批上传，也就是说先将图片以外的数据先上传，然后再上传图片，一次上传2张或者3张，然后按照顺序一批一批的上传（注意，这边的分批并不是并发，而是一批上传完后再上传下一批）。至此，图片上传基本做好，小白一枚，可能这是比较基本的做法，大神勿喷。。。。