1. 原生的上传图片

  <input type="file" onchange="fileChange" />

  function fileChange(event){
    // 获得文件对象
    console.log(event.targe.files[0])
    const file = event.target.files[0]
    // 获得base64流数据
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = (e) => {
      // e.target.result 是图片的 base64 流数据
      console.log(e.target.result)
    }
  }

通过上述代码可以得到 上传文件的文件对象，然后可转换为 base64

参见例子获得文件对象以及转换base64

2. 图片压缩

上述代码获得base64流数据，压缩函数如下
```javascript
 function compressImage(base64Img){
    const image = new Image()
    image.src = base64Img
    let canvas = document.getElementById("compressCanvas")
    if(!canvas){
      const body = document.body
      canvas = document.createElement('canvas') // 创建canvas标签
      canvas.id = 'compressCanvas' // 给外层容器添加一个id
      canvas.style.position = 'fixed'
      canvas.style.zIndex = '-1'
      canvas.style.opacity = '0'
      canvas.style.top = '-100%'
      canvas.style.left = '-100%'
      body.append(canvas)
    }
    const context = canvas.getContext("2d")
    canvas.height = height
    canvas.width = width
    context.drawImage(image, 0, 0, width, height)
    const compressBase64 = canvas.toDataURL('image/jpeg', '0.7')
    // 此处获得压缩后的 base64 流图片
    return compressBase64
}

3. 将压缩后的base64 图片转换为对象

  // 传入文件对象和文件名合成 file 对象 
  function base4ToFile (base64Image, fileName) {
    const arr = base64Image.split(',')
    const mime = arr[0].match(/:(.*?);/)[1]
    const bstr = atob(arr[1])
    let n = bstr.length
    const u8arr = new Uint8Array(n)
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n)
    }
    fileName = fileName || ('pj' + Date.now() + '.jpg')
    return new File([u8arr], fileName, { type: mime })
  }

4. 至此，功能部分完成

串起来即可
完整例子 [点击跳转](https://codepen.io/mineminego/pen/qBarPwV)