图片上传与压缩技巧总结

前端在项目开发中，会经常遇到需要这样的需求：
1.将用户上传的资料通过接口传递给后端
2.对于图片类型的资料，需要在前端进行压缩至200kb左右

难点1：
在开发中，尤其是axios，默认的传参格式是josn，而上传文件的接口一般传参格式都是form-data，在使用接口时，参数在浏览器中的表现形式是这样的：

image.png

难点2：
如何进行图片的压缩

解决思路：
在封装接口参数的时候，通过new FormData()创建实例，并通过append方法向实例中添加属性，并且手动添加属性cantentType

form_data.append('contentType', 'multipart/form-data')

axios拦截器请求拦截的时候加入对于contentType的识别，并在contentType等于multipart/form-data的时候将传参格式改为multipart/form-data

// 请求拦截
service.interceptors.request.use((req) => {
  if (req.data.contentType === 'multipart/form-data') {
    req.headers['Content-Type'] = req.data.contentType
  }
}

对于需要传递给后端的图片数据，在前端我们进行一个压缩的处理，我将之封装为了一个方法compressImg，代码如下：

// 生成图片对象
const readImg = (file) => {
  return new Promise((resolve, reject) => {
    const img = new Image()
    const reader = new FileReader()
    reader.onload = function (e) {
      // @ts-ignore
      img.src = e.target.result
    }
    reader.onerror = function (e) {
      reject(e)
    }
    reader.readAsDataURL(file)
    img.onload = function () {
      resolve(img)
    }
    img.onerror = function (e) {
      reject(e)
    }
  })
}

// 利用canvas压缩图片
export const compressImg = async (fileData, mx = 1000, mh = 1000) => {
  const canvasImgData = await readImg(fileData)
  return new Promise((resolve, reject) => {
    const canvas = document.createElement('canvas')
    const context = canvas.getContext('2d')
    // @ts-ignore
    const { width: originWidth, height: originHeight } = canvasImgData
    let dataURL = ''
    // 最大尺寸限制
    const maxWidth = mx
    const maxHeight = mh
    // 目标尺寸
    let targetWidth = originWidth
    let targetHeight = originHeight
    if (originWidth > maxWidth || originHeight > maxHeight) {
      if (originWidth / originHeight > 1) {
        // 宽图片
        targetWidth = maxWidth
        targetHeight = Math.round(maxWidth * (originHeight / originWidth))
      } else {
        // 高图片
        targetHeight = maxHeight
        targetWidth = Math.round(maxHeight * (originWidth / originHeight))
      }
    }
    canvas.width = targetWidth
    canvas.height = targetHeight
    context.clearRect(0, 0, targetWidth, targetHeight)
    // 图片绘制
    // @ts-ignore
    context.drawImage(canvasImgData, 0, 0, targetWidth, targetHeight)
    dataURL = canvas.toDataURL('image/jpeg') // 转换图片为dataURL
    resolve(dataURL)
    // 转换为bolb对象
    // canvas.toBlob(function(blob) {
    //   resolve(blob)
    // }, type || 'image/png')
  })
}

用户点击页面选择图片进行本地上传操作后，我们可以拿到对应的数据，将这个数据作为参数传递给compressImg函数，如果用的是vant的van-uploader组件，取:after-read="afterUploadRead"的第一个默认参数file的file属性

const afterUploadRead = (file, details) => {
  console.log(file.file)
}

如果是element的el-upload组件，则取得是:before-upload="beforeUpload"事件的默认参数file

const beforeUpload = (file) => {
  console.log(file)
}

不管是何种情况，最终传递给compressImg方法的参数应该是这样的数据

image.png

上传页面压缩图片数据，封装接口参数并触发接口的代码如下：

const finalCompressData = await compressImg(file.file)
let form_data = new FormData()
let fileName =
  file.file.name ||
  Math.floor(Math.random() * 100000) +
    '.' +
    file.content.split(';')[0].split('/')[1].replace('jpeg', 'jpg')
form_data.append('file', dataURLtoBlob(finalCompressData), fileName)
form_data.append('contentType', 'multipart/form-data')
uploadfile(form_data).then((res: any) => {
}

这样压缩后的图片数据，基本都只有100多kb，同时清晰度也是可以正常查看的。
注意，上面的这个compressImg函数只能压缩图片数据，其他格式的如视频等，都是没法压缩的。