0.图片上传思路
- 监听一个input(type=‘file’)的onchange事件,这样获取到文件file;
- 将file转成dataUrl;
- 然后根据dataUrl利用canvas绘制图片压缩,然后再转成新的dataUrl;
- 再把dataUrl转成Blob;
- 把Blob append进FormData中;
- xhr实现上传。
1.基于H5的File API和input实现
About 12 min
- 监听一个input(type=‘file’)的onchange事件,这样获取到文件file;
- 将file转成dataUrl;
- 然后根据dataUrl利用canvas绘制图片压缩,然后再转成新的dataUrl;
- 再把dataUrl转成Blob;
- 把Blob append进FormData中;
- xhr实现上传。