Skip to main content
前端文件上传总结

0.图片上传思路

  1. 监听一个input(type=‘file’)的onchange事件,这样获取到文件file;
  2. 将file转成dataUrl;
  3. 然后根据dataUrl利用canvas绘制图片压缩,然后再转成新的dataUrl;
  4. 再把dataUrl转成Blob;
  5. 把Blob append进FormData中;
  6. xhr实现上传。

1.基于H5的File API和input实现


About 12 min文章专栏硬核前端