最近项目需要实现一个需求,用户上传图片时,图片大小超过4M,长宽超过2000,需要压缩到400k,2000宽高.在git上找到一个不错的方法,把实现方法总结一下:
安装image-conversion包
npm i image-conversion --save
 
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
js
<script>
// 引入image-conversion
import imageConversion from 'image-conversion' methods: {
// 第一种,不考虑图片长宽,只考虑图片大小的情况,图片超过4M就压缩
beforeUpload (file) {
return new Promise((resolve, reject) => {
let isLt2M = file.size / 1024 / 1024 < 4 // 判定图片大小是否小于4MB
if (isLt2M) {
resolve(file)
}
console.log(file)
// 压缩到400KB,这里的400就是要压缩的大小,可自定义
imageConversion.compressAccurately(file, 400).then(res => {
// console.log(res)
resolve(res)
})
})
}, //第二种,图片大小超过4M,长度超过2000就压缩
beforeUpload2 (file) {
// 图片不大于4m,宽度不大于2000
return new Promise((resolve, reject) => {
let _URL = window.URL || window.webkitURL
let isLt2M = file.size / 1024 / 1024 > 4 // 判定图片大小是否小于4MB
// 这里需要计算出图片的长宽
let img = new Image()
img.onload = function () {
file.width = img.width // 获取到width放在了file属性上
file.height = img.height // 获取到height放在了file属性上
let valid = img.width > 2000 // 图片宽度大于2000
// console.log(11, file)
// 这里我只判断了图片的宽度,compressAccurately有多个参数时传入对象
if (valid || isLt2M) {
imageConversion.compressAccurately(file, {
size: 400,
width: 2000
}).then(res => {
// console.log(33, res)
resolve(res)
})
} else resolve(file)
}
// 需要把图片赋值
img.src = _URL.createObjectURL(file)
})
},
}
</script>
这样就实现了图片的自动压缩功能,这个组件还有一些其他功能,使用的时候如果有其他需求,可以看下文档https://github.com/WangYuLue/image-conversion
 

vue+element-ui upload图片上传前大小超过4m,自动压缩到指定大小,长宽的更多相关文章

  1. Vue+Element UI 实现视频上传

    一.前言 项目中需要提供一个视频介绍,使用户能够快速.方便的了解如何使用产品以及注意事项. 前台使用Vue+Element UI中的el-upload组件实现视频上传及进度条展示,后台提供视频上传AP ...

  2. 【antd Vue】封装upload图片上传组件(返回Base64)

    最近需要把上传的图片信息存储到数据库,以base64的方式,需要重新封装一下antd的upload组件 1. 使用方法 引入组件然后配置一下即可使用,配置项包括 defaultImageList,需要 ...

  3. input file实现多选,限制文件上传类型,图片上传前预览功能

    限制上传类型 & 多选:① accept 属性只能与 <input type="file" /> 配合使用.它规定能够通过文件上传进行提交的文件类型. ② mu ...

  4. html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  5. ASP.NET MVC图片上传前预览

    回老家过春节,大半个月,在家的日子里,吃好睡好,人也长了3.5Kg.没有电脑,没有网络,无需写代码,工作上相关的完全放下......开心与父母妻儿过个年,那样的生活令Insus.NET现在还在留恋.. ...

  6. file标签 - 图片上传前预览 - FileReader & 网络图片转base64和文件流

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  7. 前端的图片压缩image-compressor(可在图片上传前实现图片压缩)

    https://www.imooc.com/article/40038 https://www.jianshu.com/p/3ce3e3865ae2 前端的图片压缩image-compressor(可 ...

  8. HTML5 FileReader实现图片上传前预览

    如果你的浏览器支持Html5的FileReader的话,实现图片上传前进行预览是一件非常容易之事情. 在控制器,创建一个视图Action: jQuery代码: 实时演示一下: 下面内容于2014-11 ...

  9. 【转】html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

随机推荐

  1. 【401】Python 求合数的所有质数因子

    对于这样的一个题目来说,出看来,可能会想到判断是否为质数,但其实并不需要. 只要按照从2开始遍历,只要遇到可以整除的就是想要的质数,理由是,如果遇到合数的话,那么在此之前一定会遇到这个合数的质因子,因 ...

  2. kubernets部署sock-shop微服务电商平台(11)

    一.准备条件 确保kubernetes可以访问:reg.yunwei.edu镜像库(vim /etc/hosts)   需要准备镜像:   [root@cicd sock-shop]# cat com ...

  3. python中星号变量的几种特殊用法

    python中星号变量的几种特殊用法 不知道大家知不知道在Python中,星号除了用于乘法数值运算和幂运算外,还有一种特殊的用法"在变量前添加单个星号或两个星号",实现多参数的传入 ...

  4. git命令自动补全

    git安装好后发现命令不能自动补全于是搜了很多方法,先按博客里面的方法试了下: 1.下载配置文件 git clone git://git.kernel.org/pub/scm/git/git.git ...

  5. JAVA数据结构和算法 2-数组

    数组中使用的主要算法:插入.查找(线性查找-无序/二分查找-有序).删除 在JAVA中数组属于对象类型: 1.创建方法有3种: 或者 数组一旦创建,大小不可改变.数组大小可以通过length字段获得: ...

  6. Reactor系列(八)concatMap有序映射

    #java#reactor#comcatMap# 有序映射 视频讲解:https://www.bilibili.com/video/av79705356/ FluxMonoTestCase.java ...

  7. mac必装软件

    1.IINA: https://iina.io/ 2.keka: https://www.keka.io/zh-cn/ 3.欧陆词典: https://www.eudic.net/v4/en/app/ ...

  8. Nginx之rewrite四种flag

    利用nginx的rewrite命令,可以实现URL的重写,可在nginx配置文件的server.location.if部分使用,对于rewrite有四种不同的flag. redirect:返回302临 ...

  9. JSP和Servlet异常处理转发

    <error-page> <!-- 指明异常类型. --> <exception-type>java.lang.ArrayIndexOutOfBoundsExcep ...

  10. Linux Centos下软件的安装与卸载方法

    转载于: http://blog.csdn.net/zolalad/article/details/11368879 Linux下软件的安装与卸载   第一章   linux下安装软件,如何知道软件安 ...