vue自动压缩上传图片

1.下载插件npm i image-conversion --save
2.页面引用:import * as imageConversion from 'image-conversion
3.页面 (ps:若为自动上传,
before-upload失效,请移步:https://www.cnblogs.com/gyw1996/p/15817627.html)
<el-upload
  action="https://jsonplaceholder.typicode.com/posts/"
  list-type="picture-card"
  :on-preview="handlePictureCardPreview"
  :before-upload="beforeRead"
  :file-list="fileList"
  :on-remove="handleRemove">
  <i class="el-icon-plus"></i>
</el-upload>
4.js文件
beforeRead(file) {
  console.log(file)
  // 上传之前校验
  return new Promise((resolve, reject) => {
    console.log('压缩前', file) // 压缩到400KB,大于400KB的图片都会进行压缩,小于则不会此值可自行定义
    imageConversion.compressAccurately(file, 400).then(res => { // console.log(res)
      res = new File([res], file.name, { type: res.type, lastModified: Date.now() })
      console.log('压缩后', res)
      resolve(res)
    })
  })
},

 

 
posted @ 2022-01-18 14:26  彳小闲鱼  阅读(565)  评论(0编辑  收藏  举报