原理流程：

File->base64->canvas(利用toDataURL来压缩)->base64(压缩后的)->blob

1. 从input获取文件
2. filereader 将文件转化为base64
3. 创建图片对象，获取处理图片宽高
4. 创建canvas对象，将图片画在canvas对象上，同时可用改变图片尺寸。
5. canvas对象转化为base64，如果图片类型为jpg，可用设置压缩比例
6. base64可用直接显示在页面上，如果要传至后台，需要转化为为blob

获取file对象，通过监听表单change事件

// 监听表单change事件
fileSelect.addEventListener('change', ({ target: el }) => {
  console.log(el)
  console.log('选择图片完成')
  console.log(el.files[0])
  PIC_TO_BASE64(el.files[0])
})

图片转base64 并用预览

/**
 * 将图片转换为base64格式
 * @param {Blob} file 图片blob对象
 */
function PIC_TO_BASE64(file, callback) {
  // 利用fileReader把文件转base64
  let reader = new FileReader()
  reader.readAsDataURL(file)
  reader.onload = (e) => {
    // 当图片读取完成时
    console.log('e: ', e)
    // e.target.value: 图片的base64字符串
    callback(reader.result)
  }
}

图片file上传

function picUpload() {
  let formdata = new FormData()
  // formdata.append('name', 'zs');
  console.log('filelist: ', fileSelect.files)
  // 添加formdata节点
  formdata.append('myfile', fileSelect.files[0])
  axios
    .post('http://127.0.0.1:3000', formdata, {
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    })
    .then((res) => {
      console.log(res)
    })
    .catch((err) => {
      console.log(err)
    })
}

base64转file

file转base64

FileReader.readAsDataURL()

readAsDataURL 方法会读取指定的 Blob (opens new window) 或 File (opens new window) 对象。返回一个 data:URL格式的字符串（base64编码）以表示所读取文件的内容。

现成的库

Compressorjs (opens new window)

yarn add compressorjs

语法

new Compressor(file[, options])

/**
 * @description: 读取文件前验证
 * @param {File} file
 * @return {*}
 */
beforeReadPromise(file) {
  let _this = this
  return new Promise((resolve, reject) => {
    if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
      this.$toast({
        type: 'fail',
        message: '请正确上传图片文件'
      })
      reject(new Error())
    } else {
      // 上传前处理图片
      // 压缩图片
      // eslint-disable-next-line
      new Compressor(file, {
        success(res) {
          // 压缩并转成了blob
          let size = res.size / 1024 / 1024 // 单位 MB
          if (size > 5) {
            _this.$toast({
              type: 'fail',
              message: '上传图片过大'
            })
            // eslint-disable-next-line
            reject()
          }
          resolve(res)
        },
        error(err) {
          console.log(err.message)
        }
      })
    }
  })
}