图片上传与压缩技巧总结

前端在项目开发中,会经常遇到需要这样的需求:
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函数只能压缩图片数据,其他格式的如视频等,都是没法压缩的。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,219评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,363评论 1 293
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,933评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,020评论 0 206
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,400评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,640评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,896评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,597评论 0 199
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,327评论 1 244
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,581评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,072评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,399评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,054评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,083评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,849评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,672评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,585评论 2 270

推荐阅读更多精彩内容