大体的思路是，部分 api 的兼容性请参照caniuse： 

利用FileReader,读取blob对象,或者是file对象，将图片转化为data uri的形式。 
使用canvas,在页面上新建一个画布,利用canvas提供的 API,将图片画入这个画布当中。 
利用canvas.toDataURL()，进行图片的压缩，得到图片的data uri的值 
上传文件。

安装

npm install canvas-resize --save

使用

import canvasResize from 'canvas-resize'

canvasResize(img, {
  crop: false,
  quality: 0.9,
  rotate: 0,
  callback(baseStr) {
    console.log(baseStr.length)
  }
})

链接: https://www.fly63.com/nav/2711