vue+element图片上传前进行压缩

最新推荐文章于 2025-10-21 16:19:52 发布

原创

最新推荐文章于 2025-10-21 16:19:52 发布 · 536 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

文章介绍了如何在Vue项目中利用image-conversion包对上传的图片进行压缩，特别是在Element-UI的上传组件中，通过before-upload钩子函数实现图片大小和尺寸的检查与压缩。如果图片超过4MB或宽度超过2000，将自动进行压缩。方法包括仅考虑图片大小和同时考虑大小及长宽限制的两种情况。

安装image-conversion包

npm install --save image-conversion

template

<template>
  <div class="select_invoice">
    <el-upload
      class="upload-demo" :multiple="true" :action="uploadPath" :data="uploadData" accept="bmg,.png,.jpg,.jpeg" :before-upload="beforeUpload" :on-success="handleSuccess" :on-error="hanldeError" multiple
      :limit="20">
      <el-button size="small" type="primary">添加图片</el-button>
    </el-upload>
  </div>
</template>

压缩的方法放在before-upload中,这个方法可以接受一个promise,提一下,最好下载新版本的element-UI,以前的旧版本可能不支持返回promise